先看一下计算属性
vue只有data区的数据才具备响应式的功能.
计算和侦听属性
- v-text里可以写一些逻辑
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
- 不过页面有大量引用这种逻辑, 显得就不太酷了, 将这种需要处理的属性写到computed里
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
参考
计算属性持续追踪它的响应依赖。在计算一个计算属性时，Vue.js 更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。因此，只要依赖不发生变化，访问计算属性会直接返回缓存的结果，而不是调用 getter。
下面的栗子,只有msg发生变化时,才会重新计算.即调用属性的get方法.
- 只有当this.msg更改时,才会触发computed重新计算
<div id="app">
<input type="text" v-model="msg">
{{example}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
computed: {
example() {
return Date.now() + this.msg;
}
}
})
</script>
- 栗子2: 全选按钮
<div id="app">
全选: <input type="checkbox" v-model="checkAll"> <br>
<input type="checkbox" v-for="product in products" v-model="product.isSelected">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "maotai",
products: [
{productName: 'python', isSelected: false},
{productName: 'go', isSelected: true},
],
},
computed: {
checkAll: {
get() { //计算checkall的值
return this.products.every(item => item.isSelected);
},
set(val) {//根据checkall的值计算每项该不该选
this.products.forEach(item => item.isSelected = val);
}
}
}
})
- 仅有少数computed属性需要set, 绝大多数只有get(可以省略关键词)
<div id="app">
<input type="text" placeholder="price1" v-model="price1">
<input type="text" placeholder="price2" v-model="price2"> <br>
总价格: {{price3}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'maotai',
price1: 1,
price2: 2,
},
computed: {
price3() {
return parseInt(this.price1) + parseInt(this.price2);
}
}
})
</script>
