vue.js的计算属性介绍

2020-11-27 来源：客趣旅游网

本篇文章给大家分享的内容是vue.js的计算属性介绍，有着一定的参考价值，有需要的朋友可以参考一下

computed方法
-声明了一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

<p id="app">
 <p>原始字符串: {{ message }}</p>
 <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
 el: '#app',
 data: {
 message: 'Runoob!'
 },
 computed: { //计算属性的getter
 reversedMessage: function () {
 // `this指向vm实例
 return this.message.split('').reverse().join('')
 }
 }
})</script>

methods 方法
-效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

methods: {
 reversedMessage2: function () {
 return this.message.split('').reverse().join('')
 }
}

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：用于更新原有属性

<p id="app">
 <p>原始字符串: {{ message }}</p>
 <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
 el: '#app',
 data: {
 message: 'Runoob!'
 },
 computed: { //计算属性的getter
 reversedMessage: function () {
 // `this指向vm实例
 return this.message.split('').reverse().join('')
 }
 }
})</script>

methods: {
 reversedMessage2: function () {
 return this.message.split('').reverse().join('')
 }
}

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：用于更新原有属性

显示全文

全部栏目

vue.js的计算属性介绍