vue的computed方法实现改名

<div id="app">

    姓：<input type="text" v-model="firstName"> +

    名：<input type="text" v-model="lastName"> =

    <span>{{fullName}}</span><br><br>

    <button @click="changeName">改名卡</button>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>

    const app = new Vue({

      el: '#app',

      data: {

        firstName: '刘',

        lastName: '备'

      },

      computed: {

            // fullName(){

            //     return this.firstName + this.lastName

            // }

            //获取+设置

            fullName:{

                //当fullname求值时执行get优先缓存

                get(){

                    return this.firstName + this.lastName

                },

                //当修改赋值时执行set

                set(value){

                    this.firstName=value.slice(0,1);

                    this.lastName = value.slice(1);

                }

            }

      },

      methods: {

        changeName(){

            this.fullName = '张锋'

        }

      }

    })

  </script>