vue.js_12_vue的watch和computed
1.watch用来监测指定Vue实例上的数据变动。
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。
1.>使用watch监听路由的变化打印在控制台 $route.path路由地址
当$route.path的数据变动时触发watch中的方法
watch: { '$route.path': function(newval,oldval) {
console.log(this.$route)
}
}
<body>
<div id="app"> <router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h2>登陆组件</h2>'
};
var register = {
template: '<h2>注册组件</h2>'
};
var router = new VueRouter({
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: login
},
{
path: '/register',
component: register
},
],
linkActiveClass: 'myclass'
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router,
watch: {
'$route.path': function(newval,oldval) {
console.log(this.$route) }
}
});
</script>
</body>
2.computed
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
1>使用computed监视完成firstname+lastname
computed：不可再data中定义
computed：当computed中的任意属性值发生改变时computed方式会重新加载
computed：被多次使用时不会加载多次，computed的结果会被缓存
<body>
<div id="app">
<input type="text" v-model="firstname" />+
<input type="text" v-model="lastname" />=
<input type="text" v-model="name" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
computed: { //computed中可以定义一些计算属相，本质就是方法，
//直接把name当作熟属性使用
//在name: function() {}中所有的属性发生改变时 就会触发 该方法
name: function() {
return this.lastname + '-' + this.firstname
}
}
})
</script>
</body>
vue.js_12_vue的watch和computed的更多相关文章
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- Vue 基础自查——watch、computed和methods的区别
1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- vue里的watch 和 computed 监听的不同
1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
随机推荐
- 基于Element-UI的el-table，input框输入实现排序功能
最终效果如下 实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容: 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表: 实现思路 使用原生的in ...
- 概率dp——hdu4089推公式+循环迭代
迭代是化简公式的常用技巧 dp[i][j]表示队伍中有i人,tomato排在第j位出现情况2的概率,那么先推出公式再进行简化 dp[i][1]=p21*dp[i][i] + p41 j<=k : ...
- C++调用JS,JS调用C++
JS调用C++,通过设置DIID_HTMLDocumentEvents事件,来捕获HTMLWINDOW上的事件,再通过事件对象的get_srcElement得到事件源,从而得到指定元素对象,从而获取元 ...
- LUOGU P4042 [AHOI2014/JSOI2014]骑士游戏 (spfa+dp)
传送门 解题思路 首先设\(f[x]\)表示消灭\(x\)的最小花费,那么转移方程就是 \(f[x]=min(f[x],\sum f[son[x]] +s[x])\),如果这个转移是一个有向无环图,那 ...
- hibernate_05_hibernateHQL查询QBC查询和SQL查询
1.HQL简介:HQL是Hibernate Query Language(Hibernate 查询语言)的缩写,提供更加丰富灵活.更为强大的查询能力:HQL更接近SQL语句查询语法.Hibernate ...
- (1)python tkinter-窗体
1.导入自带的包名 import tkinter 2.创建一个窗体对象 form=Tkinter.Tk() 3.显示窗体(这句应该是所有的设置部署完最后执行的一句代码) form.mainloop() ...
- 2017/7/26 SCJP英语学习
1 Declarations and Access Control ............... 1 Java Refresher . . . . . . . . . . . . . . . . . ...
- PAT甲级——A1113 Integer Set Partition
Given a set of N (>) positive integers, you are supposed to partition them into two disjoint sets ...
- <Django> MVT三大块之Models(模型)
1.ORM(对象-关系-映射)---面向对象,不需要面向SQL语句 根据对象的类型生成表结构 将对象.列表的操作,转化成SQL语句 将SQL语句查询的结果转化成对象.列表 目的:实现数据模型与数据库的 ...
- cocos2dx触摸响应
Layer其实继承了触控的接口. 所以只需要重写一些函数即可. 在helloword类中重写: virtual bool init(); /** Callback functi ...