Vue中的computed属性详解

2022-04-16 13:08:53 来源：易采站长站作者：

今天来说说vue中的计算属性computed，为了更好的理解计算属性的好处，我们先通过一个案例来慢慢了解计算属性，有如下案例：定义两个输入框以及一个span标签，span标签中的内容为两个输入框中的值，span标签中的内容随着输入框中的内容变化而变化

插值表达式

我们先用插值表达式的方法来实现这一效果

<body>    <div id="app">        姓: <input type="text" v-model=firstName> </br>        </br>        名: <input type="text" v-model=lastName></br>        </br>        姓名： <span>{{firstName}}{{lastName}}</span>    </div></body><script type="text/javascript">    new Vue({        el: "#app",        data: {            firstName: '张',            lastName: '三'        },        methods: {        }    })</script>

改变

如果计算属性中只有get没有set的话可以直接像下面代码这样写

computed: {            fullName(){                console.log(this)                return this.firstName + this.lastName                }            }