计算属性(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 ...
随机推荐
- MyBatis SQL语句写法
一.forEach 接口: public List<Entity> queryById(List<String> userids); 语法: <select id=&qu ...
- centos7系统盘变为只读文件的修复
一台物理机的系统盘在磁盘空间有剩余的情况下变为只读了,咨询后发现前几日修改过系统,然后就不可写了,重启也不行.见下图 解决:参考链接https://bbs.51cto.com/thread-92640 ...
- JXL包大解析；Java程序生成excel文件和解析excel文件内容
最近需求变化,需要把excel导入 我以前没有做过,所以我查了一些资料 和参考别人的代码 以下是多种方式: import java.io.File; import java.io.FileInputS ...
- 几种 npm install XXX 的区别
在使用npm命令安装资源包时,有哪些需要注意的区别 npm install X 会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时,不 ...
- Coding Interviews 20 包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 思路 We need another data structure to sotre ...
- LitePal
Litepal采用的是对象关系映射(ORM)模式 LitePal的配置工作. 1.添加依赖 compile 'org.litepal.android:core:1.3.2' 2.配置lite ...
- marquee横向无缝滚动无js
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...
- 关于js传送json到.net后台处理
这里的内容好像跟标题不太符合,应该是如何实现将请求得到的结果作为另一个请求的请求参数,方法就是使用json处理配合全局变量进行处理 今天做项目遇到以下情景,页面请求获得一个list数据,然后要将得到的 ...
- c#百度IP定位API使用方法
c#百度IP定位API使用方法 1.先建立一个收集信息的实体类 IPModel.cs: using System; using System.Collections.Generic; using Sy ...
- 记一次crontab执行和日志生成问题
一.crontab未执行 crontab里面设置定时任务如下: 1 19 * * * /usr/bin/python3 /home/nola/a.py > /home/nola/logs/a_l ...