计算属性(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 ...
随机推荐
- springboot学习笔记：1.前言
眼下,随着微服务敏捷开发的势头日益增长,前几年刚刚萌芽的话题,到了现在已经炽手可热.在java圈子里,springboot作为spring生态圈的顶级项目,更是火的不得了.作为java程序员,不了解和 ...
- win10安装revit失败，怎么强力卸载删除注册表并重新安装
一些搞设计的朋友在win10系统下安装revit失败或提示已安装,也有时候想重新安装revit的时候会出现本电脑windows系统已安装revit,你要是不留意直接安装revit,只会安装revit的 ...
- Ajax 请求参数过多导致 400 错误 and BCryptPasswordEncoder 加密判断
2019/06/19 先分享一种密码加密方式: Spring Security 提供了 BCryptPasswordEncoder类, 实现Spring的PasswordEncoder接口使用BCry ...
- Ubuntu12.10下安装Python3
设置Python3.2为默认版本 ubuntu12.10下默认安装了Python2.7和Python3.2.3,并且设置了Python2.7为默认的版本,因此如果讨厌麻烦的话,可以直接将Python3 ...
- SHELL的判断括号区别
在使用if语句时,经常会使用().(()).[].[[]].{}等括号,如下为几种括号简单区别对比: ( ) 用于多个命令组.命令替换.初始化数组: (( )) 整数扩展.运算符.重定义变量值,算术运 ...
- centos7 上安装jira调试系统
安装mysql数据库 在windows上面下载 http://dev.mysql.com/downloads/mysql/ 在liunx系统上可直接wget, wget https://dev.mys ...
- xpath_note - Ethan Lee
https://ethan2lee.github.io/ XPath概览 XPath,全称XML Path Language,即XML路径语言,它是一门在XML文档中查找信息的语言.它最初是用来搜寻X ...
- NBA球星的生意经 个人流量化之路
个人流量化之路" title="NBA球星的生意经 个人流量化之路"> 在国人欢天喜地的庆祝新春佳节之时,大洋彼岸也在进行着让全球篮球迷为之"着魔&quo ...
- LG承认手机业务遭到中国厂商碾压！这是输得心服口服的节奏？
近日,关于LG手机业退出中国市场的消息传的沸沸洋洋.不少相关媒体也对此事向LG北京办事处求证,得到的结果确实是手机业务退出中国市场.并且据韩媒报道,LG还将会逐渐取消高端手机业务,也就是说未来V系列和 ...
- Proto3：C++代码生成指南
本章节实际上是介绍Protocol Buffer编译器从给定的protocol定义中生成的C++代码.所有proto2和proto3生成的代码不同之处都会高亮标出 --- 需要注意的是这些不同之处只是 ...