Skip to content

Commit 95509fa

Browse files
dahui4devdahui4dev
committed
test vue
1 parent 0924911 commit 95509fa

27 files changed

+22076
-0
lines changed

‎testFile/testVueArray.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>TestVue</title>
6+
<script src="vue.js" type="application/javascript"></script>
7+
</head>
8+
<body>
9+
<div id="app">
10+
<h3>{{ message }}</h3>
11+
<div>
12+
<div>
13+
<div v-for="item of oldArray" @click="addItem(item, $event)">{{item.name}}</div>
14+
</div>
15+
<div>
16+
<ul>
17+
<child-li :item="item" v-for="item of tempArray" />
18+
</ul>
19+
</div>
20+
</div>
21+
</div>
22+
23+
<script>
24+
Vue.component("child-li", {
25+
data() {
26+
return {
27+
localItem: this.item,
28+
}
29+
},
30+
props: ['item'],
31+
template: "<li v-if='localItem.isChecked'>{{localItem}}</li>",
32+
created() {
33+
console.log('----------create----------')
34+
},
35+
destoryed() {
36+
console.log('----------destoryed----------')
37+
}
38+
});
39+
40+
var app = new Vue({
41+
el: '#app',
42+
data: {
43+
message: '这就是一个 表格',
44+
oldArray: [
45+
{
46+
name: '旧数据111',
47+
time: new Date(),
48+
isChecked: false,
49+
},
50+
{
51+
name: '旧数据222',
52+
time: new Date(),
53+
isChecked: false,
54+
}
55+
],
56+
tempArray: []
57+
},
58+
methods: {
59+
addItem(item, event) {
60+
// 处理颜色、增加数据
61+
if (event.toElement.getAttribute("style") !== "background-color: red") {
62+
item.isChecked = true;
63+
event.toElement.setAttribute("style", "background-color: red")
64+
this.tempArray.push(item)
65+
} else {
66+
// 删除数据
67+
event.toElement.removeAttribute("style")
68+
console.log('----------this.tempArray.indexOf(item)----------', this.tempArray.indexOf(item))
69+
if (this.tempArray.indexOf(item) > -1) {
70+
this.tempArray.splice(this.tempArray.indexOf(item), 1)
71+
}
72+
73+
console.log('---------after-remove----------', this.tempArray)
74+
}
75+
}
76+
}
77+
})
78+
</script>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)