forked from liutao/mvvm
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (84 loc) · 1.8 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="module">
import MVVM from './src/mvvm.js'
new MVVM({
el: '#test',
data: {
head:['座次', '姓名', '绰号', '星宿', '操作'],
usersFiels: ['order', 'name', 'nikename', 'star'],
users: [{
order: '1',
name: '宋江',
nikename: '及时雨',
star: '天魁星'
}, {
order: '2',
name: '卢俊义',
nikename: '玉麒麟',
star: '天罡星'
},{
order: '3',
name: '吴用',
nikename: '智多星',
star: '天机星'
},{
order: '4',
name: '公孙胜',
nikename: '入云龙',
star: '天闲星'
},{
order: '5',
name: '关胜',
nikename: '大刀',
star: '天勇星'
}],
a:{}
},
create(){
},
methods: {
del(order){
this.users = this.users.filter((user)=>{
return user.order !=order;
});
},
edit(index){
this.users[index].isEditing = true;
},
change(index, id, type, event){
let value = event.target.value;
this.users[index][type] = value;
this.users[index].isEditing = false;
}
},
template: `<table >
<thead>
<tr>
<th class="head" mvvm:for="(index, value) of head">{{value}}</th>
</tr>
</thead>
<tbody>
<tr mvvm:for="(index, item) of users">
<td mvvm:for="(i, field) of usersFiels" ><span mvvm:if="!item.isEditing || field == 'id' " >{{item[field] || ''}}</span><input :value="item[field] || ''" @blur="change(index, item.id, field, $event)" mvvm:else/></td>
<td ><span @click="edit(index)" >编辑</span> / <span @click="del(item.order)" >删除</span></td>
</tr>
</tbody>
</table>`
});
</script>
</body>
</html>