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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
| <div id="app">
<h4>陣列與物件的迴圈</h4>
<p>請使用 v-for 在陣列與物件上，並且加上索引</p>
<ul>
<li v-for="(item, key) in objectData">
{{ key }} - {{ item.name }} {{ item.age }} 歲
</li>
</ul>
<ul>
</ul>
<hr>
<h4>Key</h4>
<p>請在範例上補上 key，並觀察其差異</p>
<ul>
<li v-for="(item, key) in arrayData":key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
</li>
</ul>
<button class="btn btn-outline-primary" @click="reverseArray">反轉陣列</button>
<h4>Filter</h4>
<p>請製作過濾資料</p>
<input type="text" class="form-control" v-model="filterText" @keyup.enter="filterData">
<ul>
<li v-for="(item, key) in arrayData" :key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
</li>
</ul>
<h4>不能運作的狀況</h4>
<p>講師說明</p>
<button class="btn btn-outline-primary" @click="cantWork">無法運行</button>
<ul>
<li v-for="(item, key) in arrayData" :key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
</li>
</ul>
<h4>純數字的迴圈</h4>
<ul>
<li v-for="item in 10">
{{ item }}
</li>
</ul>
<h4>Template 的運用</h4>
<p>請將兩個 tr 一組使用 v-for</p>
<table class="table" v-for="(item, index) in arrayData" :key="index">
<template>
<tr>
<td>{{item.age}}</td>
</tr>
<tr>
<td>{{item.name}}</td>
</tr>
</template>
</table>
<h4>v-for 與 v-if</h4>
<p>請加上 v-if 判斷式</p>
<ul>
<li v-for="(item, key) in arrayData" v-if="item.age>20">
{{ key }} - {{ item.name }} {{ item.age }} 歲
</li>
</ul>
<h4>v-for 與 元件</h4>
<p>講師說明</p>
<ul>
<list-item :item="item" v-for="(item, key) in arrayData" :key="key"></list-item>
</ul>
<p>注意：現在建議元件使用 v-for 都加上 key。<a href="https://cn.vuejs.org/v2/guide/list.html#%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%E7%9A%84-v-for">參考</a></p>
</div>
<script>
Vue.component('list-item', {
template: `
<li>
{{ item.name }} {{ item.age }} 歲
</li>
`,
props: ['item']
});
var app = new Vue({
el: '#app',
data: {
arrayData: [
{
name: '小明',
age: 16
},
{
name: '漂亮阿姨',
age: 24
},
{
name: '杰倫',
age: 20
}
],
objectData: {
ming: {
name: '小明',
age: 16
},
auntie: {
name: '漂亮阿姨',
age: 24
},
jay: {
name: '杰倫',
age: 20
}
},
filterArray: [],
filterText: ''
},
methods: {
// 請在此練習 JavaScript
// 解答：
reverseArray: function () {
this.arrayData.reverse()
console.log(this.arrayData)
},
filterData: function () {
var vm = this;
vm.filterArray = vm.arrayData.filter(function (item) {
console.log(vm.filterText, item.name, item.name.match(vm.filterText))
return item.name.match(vm.filterText);
});
},
cantWork: function () {
// // 情境一
// this.arrayData.length = 2;
// 情境二
this.arrayData[0] = {
name: '阿強',
age: 99
}
//解法
Vue.set(this.arrayData, 0, {
name: '阿強',
age: 99
})
console.log(this.arrayData)
}
}
});
</script>
|