vue 第四天 （计算属性的使用）
因为{ {div1+div2+div3+div4+…+n}}这种写法比较复杂所以加上 computed 计算属性
1、computed 计算属性
cmputed 可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就可以
computed 具有缓存功能,只有依赖数据发生改变，才会重新进行计算，否则直接返回之前的计算结果
每个计算属性都包含一个 get 和 set
利用 computed 计算属性进行计算
<div id="apps">
<div>{
{
div1}}</div>
<div>{
{
div2}}</div>
<div>{
{
div3}}</div>
</div>
<script>
const vue = new Vue({
el: "#apps",
data: {
div1: 123,
div2: 456
},
computed: {
div3: function () {
<!-- 这里写计算属性的一些逻辑判断复杂操作-->
return this.div1 + this.div2;
}
}
})
</script>
2、get 大多数情况下可以省略
下面是 简化 和一个 get 写法
get相当于输出值
computed: {
div3: {
get:function() {
return this.div1 + this.div2;
}
},
div3: function () {
return this.div1 + this.div2;
}
}
3、set 不常用（计算属性一般是没有set方法，只读属性）
在 浏览器敲f12 上输入 vue.div3 = “hello 你好”
set相当于赋值
<div id="apps">
<div>{
{
div1}}</div>
<div>{
{
div2}}</div>
<div>{
{
div3}}</div>
</div>
<script>
var vue = new Vue({
el: "#apps",
data: {
div1: "123",
div2: "456"
},
computed: {
div3: {
set: function (input) {
<!--在控制台输入 vue.div3 = "hello 你好" -->
const split = input.split(" ");
this.div1 = split[0];
this.div2 = split[1];
},
get: function () {
return this.div1 + "-------" + this.div2;
}
}
}
})
</script>
4、计算属性 computed和methods的对比
计算属性 computed 如果执行多次不做 修改 添加 的话就执行一次
methods 如果 执行多次不做 修改 添加的话，调用多少次执行多少次
为什么计算属性就执行一次呢，因为计算属性有缓存
花开一千年,花落一千年,花叶永不见