<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>) 并不会生效，应用 v-model 来代替。