效果图
注意!!!需要外引入 vue 文件!别忘咯
代码奉上:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1>watch监听</h1>
<input type="text" v-model="obj.pre">
<select v-model="obj.type">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="text" v-model="obj.next">
=
{{obj.result}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
obj: {
pre: 1,
next: 1,
type: "+",
result: 2
}
}
},
// watch 数据监听
watch: {
"obj": {
handler(nval, oval) {
this.obj.result = eval(`(${this.obj.pre})${this.obj.type}(${this.obj.next})`);
},
deep: true,
}
}
})
</script>
</html>