Vue 第十三章 watch属性和computed属性使用
1、watch属性使用案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 firstname:'', lastname:'', fullname:'', msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 }, methods:{}, watch:{ //使用这个属性,可以监视data中指定数据的变化,然后触发这个watch中对于的function处理函数 'firstname':function(newVal,oldVal){ console.log("监听到了变化") // this.fullname = this.firstname + '-' + this.lastname this.fullname = newVal + '_' + this.lastname }, 'lastname':function(newVal ,oldVal){ console.log("监听到了变化") // this.fullname = this.firstname + '-' + this.lastname this.fullname = this.firstname + '-' + newVal } } }) </script> </body> </html>
2、watch属性使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> <p>{{fullname}}</p> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 firstname:'', lastname:'', msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 }, methods:{}, computed:{ //在computed中,可以定义一些属性,这些属性叫做计算属性,计算属性本质就是一个方法, //只不过我们在使用这些计算属性的时候,是把他们的名称直接当作属性来使用的,并不会把 //计算属性当作方法去调用 //注意:计算属性在引用的时候,一定不要加()去调用,直接把它当作普通属性去绑定 //注意:只要计算属性这个function内部所用到的任何data中的数据发生变化,就会立即重新计算这个属性 //注意:计算的求值结果会被缓存起来,方便下次调用,如果计算属性方法中,所有的任何数据 //都没有发生变化,则不会重新计算属性求值 'fullname':function () { return this.firstname + '-'+ this.lastname } } }) </script> </body> </html>
本文来自博客园,作者:小白啊小白,Fighting,转载请注明原文链接:https://www.cnblogs.com/ywjfx/p/12566493.html