首页 > 其他分享 >vue: number addition

vue: number addition

时间:2023-07-15 23:34:44浏览次数:38  
标签:vue return log addition number Vue

 

单页应用:(Single Page App, SPA)体现了其强大的优势。
页面是局部刷新的,响应速度快,不需要每次加载所有的CSS/JS。
前后端分离,前端(手机端)不受后端(服务器端)的开发语言的限制。
Angular,React ,Vue.js框架都是很好的选择。


https://github.com/vuejs/awesome-vue

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <button v-on:click="a++">a+1</button>
    <button v-on:click="b++">b+1</button>
    <p>number+a={{add1}}</p>
    <p>number+b={{add2}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             a:0,
             b:0,
             number:100
           }
        },
        computed: {
            add1:function(){
                console.log("number+a");
                return this.a+this.number
            },
            add2:function(){
                console.log("number+b")
                return this.b+this.number
            }
        }
      //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
 </script>
</body>
</html>

  

标签:vue,return,log,addition,number,Vue
From: https://www.cnblogs.com/geovindu/p/17557230.html

相关文章

  • 【技术积累】Vue.js中的事件【一】
    Vue中的事件是什么在Vue.js中,事件是用于处理用户交互的重要机制。Vue.js提供了一系列的事件处理方法和指令,使开发者能够方便地处理用户的各种操作。1.事件绑定:Vue.js通过v-on指令来绑定事件。可以在HTML标签上使用v-on指令来监听特定的事件,并在触发事件时执行相应的方法。例如,......
  • Vue安装
    安装vue及脚手架1.安装vue.jsnpminstallvue-g或者cnpminstallvue-g查看安装的vue信息:npminfovue或者cnpminfovue2.安装webpack模板安装webpacknpminstallwebpack-g安装webpack-cli:npminstall--globalwebpack-cli安装成功后可使用webpack-v查看......
  • vue--day16---列表排序
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch与computed实现列表过滤</title>......
  • vue-day16---watch与computed实现列表过滤
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch与computed实现列表过滤</title>......
  • VUE WebSocket连接成功后,立即发送一个token
    ws=newWebSocket(ws://${location.host}/xxx)ws.onopen=()=>{ws.send(JSON.stringify({headers:{Authorization:Bearer${token}}}));isConnected.value=true;}查看方法:在消息数据里(不是标头里)......
  • vue3 封装api接口
    新建axiosj.tsimportaxiosfrom'axios';import{showMessage}from"./status";//引入状态码文件import{ElMessage}from'element-plus'//引入el提示框,这个项目里用什么组件库这里引什么//设置接口超时时间axios.defaults.timeout=60000;//请求地址,......
  • vite-plugin-vue-images——Vite自动导入图片
    vite-plugin-vue-images——Vite自动导入图片在Vue2时我们经常会这样引用图片:<img:src='require("地址")'/>但在Vite中不支持require了,引用图片变成了下面这样:<template><img:src='imgUrl'/></template><scriptsetup>importimgUrl......
  • vue中$set和$forceUpdate强制更新视图层的区别
    $forceUpdate原理:调用notify() 强制视图更新  $set原理:defineReactive(this.data数据,要劫持得数组索引或对象键,默认值)   建立响应式依赖  指定数据更新使用场景:如果data数据的层级过深,导致无法响应式显示解决方法一:$set()this.$set(target,key,value)解......
  • vue3 为什么使用 hooks?
    目的为了解决在组件中共享逻辑和状态的问题。 hooks提供了一种更简洁和直观的方式来共享逻辑和状态。vue3中的hooks是基于函数的组件模型,通过在函数组件内部使用特定的hook函数来实现。每个hook函数都有特定的用途,例如:useState用于创建和管理状态,useEffect用于......
  • SpringBoot+Vue3+MySQL集群 开发健康体检双系统
    第1章课程介绍试看4节|38分钟观看项目演示,熟悉大健康体检项目主要功能。掌握学习本课程的最佳方法,以及如何利用在线手册学习和答疑。第2章大健康体检项目全栈环境搭建16节|218分钟利用虚拟机或者云主机安装Linux系统和Docker环境,部署MongoDB、Redis、Minio和RabbitMQ等中......