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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
computed属性计算
<div>
val3: {{ val3 }}
</div>
<div>
val4: {{ val4 }}
</div>
<div>
val5: {{ val5 }}
</div>
<div>
val6: {{ val6 }}
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'val1',
},
computed: {
val3() {
console.log("get val3 val:" + this.message)
return this.message
},
val4:function() {
console.log("get val4 val:" + this.message)
return this.message
},
val5: {
get() {
console.log("get val5 val:" + this.message)
return this.message
},
set(val) {
this.message = val
console.log("val5 change(set):" + val)
}
},
val6: {
get:function() {
console.log("get val6 val:" + this.message)
return this.message
},
set:function(val) {
this.message = val
console.log("val6 change(set):" + val)
}
}
}
});
</script>
<style>
html, body {
margin: 5px;
padding: 0;
}
</style>
</html>
|
