<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
</style>
</head>
<body>
<table id=‘app‘>
<tr>
<th>
<input type="checkbox" name="" id="checkAll" @click=‘fn‘ />全选/全不选
</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input :checked=‘msg‘ type="checkbox" name="check" class="ck" />
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>￥200</td>
</tr>
<tr>
<td>
<input :checked=‘msg‘ type="checkbox" name="check" class="ck" />
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>￥998</td>
</tr>
<tr>
<td>
<input :checked=‘msg‘ type="checkbox" name="check" class="ck" />
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>￥88</td>
</tr>
</table>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: ‘#app‘,
data: {
// 先让checked默认为false
msg: false,
},
methods: {
// 点击事件做判断
fn() {
// 如果为值为false 那就让他编程true
// 如果为值为true 那就让他编程false
if (this.msg == true) {
this.msg = false;
} else {
this.msg = true;
}
}
}
})
</script>
</html>
<!-- 有bug联系我 -->
vue实现简单的全选/全不选效果
原文地址：https://www.cnblogs.com/lwa1999/p/11779672.html
时间： 2024-11-05 19:33:42