Vue计算属性

1.我们通过一个案例的不同写法来理解计算属性

例子：

 

 <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model:value="firstName"> <br/> 名：
        <input type="text" v-model:value="lastName"><br/> 全名：
        <span>{
  {fullNmae()}}</span>
    </div>
    <script>
        Vue.config.productionTip = false // 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            methods: {
                fullNmae() {
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>

2