Vue的计算属性和侦听器
1 计算属性:他是根据对象已有的属性计算出新的属性值。具有缓存的功能,如果原始属性不变,则用缓存。否则,重新计算。
前端 <form> <label>姓</label><input v-model="firstName"> <label>名</label><input v-model="lastName"> <div v-text="fullName"></div> </form> js代码 new Vue({ el:"#app", data:{ firstName:'', lastName:'' }, computed:{ fullName:function () { return this.firstName + ' ' + this.lastName; } } })
2 侦听器:它是侦听属性值或者计算属性的变化,一旦发生变化可以在函数中进行相应的操作。
前端 <form> <label>姓</label><input v-model="firstName"> <label>名</label><input v-model="lastName"> <div v-text="fullName"></div> <div v-text="count"></div> </form> js代码 new Vue({ el:"#app", data:{ firstName: '', lastName: '', count: 0 }, computed:{ fullName:function () { return this.firstName + ' ' + this.lastName; } }, watch:{ fullName:function () { this.count ++; } } })
学习过程中,难免出错。如果您在阅读过程中遇到不太明白,或者有疑问。欢迎指正...联系邮箱crazyCodeLove@163.com
如果觉得有用,想赞助一下请移步赞助页面:赞助一下