<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="box">
<table class="table">
<tr>
<td>id</td>
<td>分类名称</td>
<td>排序</td>
<td>创建时间</td>
<td>更新时间</td>
<td>操作人</td>
<td>状态</td>
<td>操作管理</td>
</tr>
<tr v-for="(v,k) in all">
<td>{{k+1}}</td>
<td>{{v.name}}</td>
<td>{{v.px}}</td>
<td>{{v.time}}</td>
<td>{{v.timee}}</td>
<td>{{v.namee}}</td>
<td><button type="button" @click="fun3(k)">删除</button></td>
<td><input type="checkbox" v-model="v.check" /></td>
</tr>
</table>
<button type="button" @click="fun1()">全选</button>
<button type="button" @click="fun2()">全不选</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '.box',
data: {
all: [{
id: 2,
name: '电脑',
px: '1',
time: 2021,
timee: 2033,
namee: '闫',
check: false
}, {
id: 3,
name: '电脑',
px: '2',
time: 2021,
timee: 2033,
namee: '闫',
check: false
}, {
id: 4,
name: '电脑',
px: '3',
time: 2021,
timee: 2033,
namee: '闫',
check: false
}]
},
methods: {
fun1() {
this.all.map(function(v, k) {
v.check = true
})
},
fun2() {
this.all.map(function(v, k) {
v.check = false
})
},
fun3(k) {
this.all.splice(k, 1)
}
}
}) //结尾
</script>
