A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始


今天我们来学习一下计算属性。在开发中,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。

什么是计算属性

  计算属性就是当其以来属性的值发生改变时,这个属性的值会自动更新,与之相关的DOM部分也自动更新。具体代码如下:

<template>
    <div id ="example">
        <input type="text" v-model="didi"  />
        <input type="text" v-model="family" />
        <br/>
        didi={{didi}}, family={{family}}, didiFamily={{didiFamily}}
    </div>
</template>
<script>
    export default {
        name:'HelloWorld',
        data (){
            return {
                didi:'didi',
                family:'family'
            }
        },
        computed:{
                didiFamily:function(){
                    return this.didi + ' ' + this.family
                }
            }
    }
</script>


运行结果如下:
这里写图片描述
  上面的代码只提供了getter,实际上除了getter,我们还可以设置计算属性的setter。代码示例如下:

<template>
    <div id ="example">
        <input type="text" v-model="didi"  />
        <input type="text" v-model="family" />
        <br/>
        didi={{didi}}, family={{family}}, didiFamily={{didiFamily}}
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
        data(){
            return {
                didi:'didi',
                family:'family'
            }
        },
        computed:{
            didiFamily:{
                get:function(){

                    return this.didi + ' ' + this.family
                },
                set:function(newVal){
                    var names = newVal.split(' ')
                    this.didi = names[0]
                    this.family = names[1]
                }
            }
        }
    }
</script>



当我们修改didiFamily时,didi和family的值也会自动更新。
  关于计算属性的缓存,默认是开启缓存的,但是cache这个字段现在官网上找不到了,好像不能够让用户去设置了。只能默认开启缓存。这个地方属于个人感悟,如果有不准确的地方,欢迎大家多多批评指正。
   当包含计算属性的节点被移除并且模版中其他地方没有再引用该属性时,那么对应的计算属性的getter方法不会执行。

【转载】https://blog.csdn.net/hanhailong18/article/details/81672932

2 个回复

倒序浏览
回复 使用道具 举报
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马