vue学习笔记 计算属性
Posted zhishaofei3
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue学习笔记 计算属性相关的知识,希望对你有一定的参考价值。
计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed里的函数名,对外就是一个变量,默认是getter。
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script type="text/javascript"> var vm = new Vue({ el: ‘#example‘, data: { message: ‘Hello‘ }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split(‘‘).reverse().join(‘‘) } } }) </script>
如果想用setter,也可以手动添加。
var vm = new Vue({ el: ‘#example‘, data: { message: ‘Hello‘ }, computed: { // a computed getter reversedMessage: { get: function () { // `this` points to the vm instance return this.message.split(‘‘).reverse().join(‘‘) }, set: function (newValue) { this.message = newValue.split(‘‘).reverse().join(‘‘) } } } }); vm.reversedMessage = ‘12345‘;
Vue实例中还提供了另外一个属性Watchers,用来观察变量的变化,如果有变量的值发生了改变,watch里的函数(和变量名一致)会触发。
var vm = new Vue({ el: ‘#example‘, data: { message: ‘Hello‘ }, computed: { // a computed getter reversedMessage: { get: function () { // `this` points to the vm instance console.log(‘我了‘); return this.message.split(‘‘).reverse().join(‘‘) }, set: function (newValue) { this.message = newValue.split(‘‘).reverse().join(‘‘) } } }, watch: { message: function (newValue, oldValue) { console.log(1); console.log(newValue); console.log(oldValue); }, reversedMessage: function (newValue, oldValue) { console.log(2); console.log(newValue); console.log(oldValue); } } }); vm.reversedMessage = ‘12345‘;
以上是关于vue学习笔记 计算属性的主要内容,如果未能解决你的问题,请参考以下文章