-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwatch.html
49 lines (45 loc) · 1.12 KB
/
watch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<!-- 监听属性 -->
<html>
<head>
<meta charset="utf-8">
<title>监听属性</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p> {{counter}} </p>
<button @click="counter++">点击增加</button>
<br />
<span>千米:</span><input v-model="kilometers" type="text" />
<span>米:</span><input v-model="meters" type="text" />
<p id="info"></p>
</div>
<script>
vue = new Vue({
el: "#app",
data: {
counter: 1,
kilometers: 0,
meters: 0
},
watch: {
kilometers: function(value) {
this.kilometers = value;
this.meters = this.kilometers * 1000;
},
meters: function(value) {
this.kilometers = value / 1000;
this.meters = value;
}
}
});
vue.$watch("counter", function(nval, oval) {
alert("以前的值" + oval + "现在变成了" + nval);
});
vue.$watch("kilometers", function(newValue, oldValue) {
document.getElementById("info").innerHTML = "以前的值" + oldValue + "现在变成了" + newValue;
});
</script>
</body>
</html>