第4章 计算属性

来源:互联网 发布:淘宝卖假货封店 编辑:程序博客网 时间:2024/05/29 02:38

模板中绑定表达式,模板是用来描述视图结构的。为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。
4.1 什么是计算属性
计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div id="example">        <input type="text" v-model="didi"/>        <input type="text" v-model="family"/>        <br>        didi={{ didi }},family={{ family }},didiFamlily={{didiFamily}}    </div><script src="../../js/vue.js"></script><script>    new Vue({        el:'#example',        data: {            didi : 'didi',            family : 'family'        },        computed: {            //一个计算属性的getter            didiFamily : function () {                return this.didi + this.family            }        }    })</script></body></html>

这里写图片描述

4.2 计算属性缓存
缓存开关,在计算属性对象中指定cache字段来控制是否开启缓存。

4.3 常见问题