<div id="demo">
    姓：<input type="text" placeholder="First Name" v-model="fristname"><br>
    名：<input type="text" placeholder="Last Name" v-model="lastname"><br>
    姓名1（單向）：{{fulname1}}<br>
    姓名2（單向）：<input type="text" placeholder="name" v-model="fulname2"><br>
    姓名3（雙向）：<input type="text" placeholder="name"><br>
</div>

<script>
    const vm = new Vue({
        el:"#demo",
        data:{
            fristname:"A",
            lastname:"B",
           // fullname1:"A B"
            fulname2:"A B"
        },
        computed:{
            //什麼時候執行：初始化的時候，相關的屬性資料發生變化的時候
            fulname1(){  //計算屬性中的一個方法，方法的返回值作為屬性值
                return this.fristname + ' ' + this.lastname;
            }
        },
        watch:{  //配置監視
            fristname:function (value) {    //fristname發生變化
                this.fulname2 = value + ' '+ this.lastname    //this就是vm物件
            }
        }
    })
    vm.$watch('lastname',function (value) {
        //更新fulname2
        this.fulname2 = this.fristname+ ' '+value
    })
</script>

v-model基礎用法

(詳見https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)

你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data

v-model 在內部為不同的輸入元素使用不同的屬性並丟擲不同的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；

• checkbox 和 radio 使用 checked 屬性和 change 事件；

• select 欄位將 value 作為 prop 並將 change 作為事件。

對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。

在文字區域插值 (<textarea>{{text}}</textarea>

&n