计算属性(computed)+侦听器（watch）+ 方法（methods）
计算属性 computed
当数据改变时，方法的结果也会发生改变。如果多处地方调用计算属性里面的同一个方法时，该方法只会执行一次。如图，在控制台改变data里面的num值时，虽然在多处使用computedNum方法，但该方法只执行一次。
<body>
<div id="app">
<p>computedNum:{{computedNum}}</p>
<p>computedNum:{{computedNum}}</p>
<p>computedNum:{{computedNum}}</p>
<p>computedNum:{{computedNum}}</p>
<p>computedNum:{{computedNum}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num:1
},
computed:{
// 如果有多处
computedNum:function(){
console.log("computing");
return this.num*2;
}
}
})
</script>
</body>
侦听器 watch
侦听指定属性，属性改变时执行相应的方法。
<body>
<div id="app">
<p>watchNum:{{watchNum}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num:1,
watchNum:""
},
// 侦听器 watch
watch:{
// 形式1：num 一发生变化就会执行 num 后面的函数
// 监听 num 的变化，num发生变化后，newV为变化后的新值，oldV为变化前的旧值。
// num:function(newV, oldV){
// console.log("watch....");
// this.watchNum = newV * 2;
// },
// 形式2: immediate 为 true 时先执行一次 handler 函数，后续 num 发生变化时也执行handler方法。
num:{
immediate:true,
// immediate为true时，第一次执行handler函数newValue为data里面的num值，oldValue为undefined
handler:function(newValue, oldValue){
console.log("watch....");
this.watchNum = newValue*2
}
} },
})
</script>
</body>
方法 methods
在 methods 里面定义的方法可以在模板表达式里面使用。与计算属性不同的是，每当方法里面的数据发生改变，每个使用该方法的地方都会调用一次该方法。如图所示有4处地方调用了该方法，改变 num 值，执行了4次。
<body>
<div id="app">
<p>countNum:{{countNum()}}</p>
<p>countNum:{{countNum()}}</p>
<p>countNum:{{countNum()}}</p>
<p>countNum:{{countNum()}}</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
num:1
},
// 里面的方法可以在模板表达式里面使用
methods:{
countNum:function(){
console.log("counting...");
return this.num*2
}
}
})
</script>
</body>
计算属性(computed)+侦听器（watch）+ 方法（methods）的更多相关文章
- Vue-比较方法、计算属性和侦听器
分别用方法.计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变. 一.方法: html: <div id="app"> {{fu ...
- VueJs(7)---计算属性和侦听器
计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- vue基础——计算属性和侦听器
计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...
随机推荐
- C# for循环提升效率的写法
,,,,,}; ,iLen=arr.Length;i<iLen;i++) //必须是显示申明,不能var { ........... }
- Redis 总结精讲 看一篇成高手系统
转自:https://blog.csdn.net/hjm4702192/article/details/80518856 本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点 ...
- labview相关内容
索引数组的用法:https://jingyan.baidu.com/album/90808022e6d0f7fd91c80fd2.html?picindex=1 定时顺序结构用法:http://zon ...
- get请求直接通过浏览器发请求传数组或者list到后台
原文链接: http://blog.csdn.net/qq_27093465/article/details/76160419 感谢原作者 例如: http://localhost:27001/tes ...
- 吴裕雄--天生自然 R语言开发学习：基本图形（续三）
#---------------------------------------------------------------# # R in Action (2nd ed): Chapter 6 ...
- js 四舍五入实现
js Number.prototype.toFixed 进行的舍入的算法没研究明白,应该不是四舍六入五成双,当然也不是四舍五入 下面是chrome与excel的对比 修改完之后的结果 对于“问题数据” ...
- 将java project打包成jar包，web project 打包成war包的几种演示
将java项目打包成jar 第一种:MyEclipse将java项目打包成jar. 1,右击项目,选择export . 2,点击Java,选择JAR file . 3,在JAR file文本中浏览打包 ...
- CentOS7用yum安装wget命令后仍然提示命令找不到的解决方法
需求:用的AWS实例自带的CentOS7用yum安装wget命令后扔提示命令找不到,后面用源码安装方式解决,下面先讲解决方法,疑问及知识点扩展最后写出 1.问题(因是mini版本系统,有些基本命令扔需 ...
- mysql5.6和5.7的权限密码设置
mysql5.6grant all privileges on *.* to root@'%' identified by "mysql_pwd" with grant optio ...
- linux-深度学习环境配置-Centos
下载Centos 7安装镜像,制作启动优盘. Install CentOS 7 安装CentOS 7. 第一步,配置日期.语言和键盘. 第二步,选择-系统-安装位置,进入磁盘分区界面.选择-其它存储选 ...