Vue之计算属性案例

要求：需要将已有的两个变量值进行拼接

<div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        全名:<span>{{fullName}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                firstName:"旋涡",
                lastName:"鸣人"
            },
            methods:{
                
            },
            computed:{
                //1.计算属性有缓存2.fullName属性所依赖的变量发生变化时候，才重复调用
                fullName:{
                    get(){
                        return this.firstName +'-'+ this.lastName;
                    }
                }
            }
        })
    </script>

效果如下：