Vue - 计算属性

翻转字符串

<div id="app"> <p>初始值：{{msg}}</p> <p>反转值：{{msg.split('').reverse().join('')}}</p> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'Hello World!' } }); </script>

简单的这样写并无问题，可是在复杂的工程里面，一个一个的列式调用会很是复杂，那咱们抽取成函数就能够了

<div id="app"> <p>初始值：{{msg}}</p> <p>反转值：{{msg.split('').reverse().join('')}}</p> <p>函数调用：{{reverseStr()}}</p> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'Hello World!' }, methods:{ reverseStr(){ return this.msg.split('').reverse().join(''); } } }); </script>

可是，标题已经很明显了，讲的并非这些，而是计算属性，那就从代码来看看

<div id="app"> <p>初始值：{{msg}}</p> <p>反转值：{{msg.split('').reverse().join('')}}</p> <p>计算属性：{{reverse}}</p> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'Hello World!' }, // 注意：计算选项 computed:{ // get 方法 reverse(){ return this.msg.split('').reverse().join(''); } } }); </script>

计算属性和Methods的区别

• 计算属性：当页面的从新渲染（不是刷新）的时候，计算属性不会改变，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；
• Methods：在页面从新渲染的时候（页面元素的data变化，页面就会从新渲染），都会从新调用method

setter：不常用

<div id="app"> <p>{{fullName}}</p> <button @click="deal()">调用计算属性的setter方法</button> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { firstName: '张', lastName: '三丰' }, methods:{ deal(){// 调用fullName的setter方法 this.fullName = '张 无忌' } }, // 注意：计算选项 computed:{ fullName:{ get(){ return this.firstName + ' ' + this.lastName; }, set(str){ let nameArr = str.split(' '); this.firstName = nameArr[0]; this.lastName = nameArr[1]; } } } }); </script>