<body>
<div id="app">
//msg是className+idName
<h1>{{ msg }}</h1>
//使用v-model关联实例数据中的className和idName
className:<input type="text" v-model="className" placeholder="输入类名值">
idName:<input type="text" v-model="idName" placeholder="输入id值">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
className: "one",
idName: "two",
msg: "onetwo"
},
//通过watch选项建立监听
watch: {
/ / 监听的方法要和监听的属性名字相同
//建立监听,分别监听到实例中className和idName两个值的变化
className(newValue, oldValue){
this.msg = newValue + this.idName;
},
idName(newValue, oldValue){
this.msg = this.className + newValue;
}
}
})
</script>
</body>
