学习Vue(二)

闲来没事,又开始了瞎折腾,感觉还有点像模像样的

计算属性

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
{{myreverseText}}
</div>

<script>
var app = new Vue({
el:"#app",
data:{
text:"123,456"
},
computed:{
myreverseText: function () {
return this.text.split(",").join("-");

}
}
});
</script>

</body>
</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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性的用法</title>
<script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
总价:{{sumPrice}}
</div>

<div id="app2">
姓名:{{sumNames}}
</div>

<script>
var app = new Vue({
el:"#app",
data:{
package1:[
{
name:"iphone7",
price:222,
count:2
},
{
name:"iphone8",
price:333,
count:2
}

],

package2:[
{
name:"apple",
price:3,
count:5
},
{
name:"banana",
price:2,
count:10
}

]
},
computed:{
sumPrice: function () {

var prices = 0;
for(var i=0;i<this.package1.length;i++){
prices += this.package1[i].price * this.package1[i].count;
}

for(var i=0;i<this.package2.length;i++){
prices += this.package2[i].price * this.package2[i].count;
}


return prices;

}
}
});


var app2 = new Vue({
el:"#app2",
data:{
firstName : "yang",
lastName:"Anthony"
},
computed:{
sumNames:{
get: function () {
return this.firstName+" "+this.lastName;
},
set:function (value) {
var names = value.split(" ");
this.firstName = names[0];
this.lastName = names[1];
}
}
}

});
</script>

</body>
</html>