方式一 : 事件绑定
<body>
<div id="app">
<input type="text" v-model="firstNumber" @keyup="handlerFullName">
<input type="text" v-model="lastNumber" @keyup="handlerFullName">
<input type="text" v-model="fullNumber">
</div>
<script>
new Vue({
el: "#app",
data: {
firstNumber: '',
lastNumber: '',
fullNumber: ''
},
methods: {
handlerFullName() {
this.fullNumber = this.firstNumber + this.lastNumber
}
}
})
</script>
</body>
方式二 : 使用监听器
<body>
<div id="app">
<input type="text" v-model="firstNumber">
<input type="text" v-model="lastNumber" >
<input type="text" v-model="fullNumber">
</div>
<script>
new Vue({
el: "#app",
data: {
firstNumber: '',
lastNumber: '',
fullNumber: ''
},
watch:{
'firstNumber' : function(newVal , oldVal){
this.fullNumber = newVal + this.lastNumber
},
'lastNumber' : function(newVal , oldVal){
this.fullNumber = newVal + this.firstNumber
}
}
})
</script>
</body>
