标签：lse checked char div 联系 tps alt pac inf
<!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实现简单的全选/全不选效果
标签：lse checked char div 联系 tps alt pac inf
原文地址：https://www.cnblogs.com/lwa1999/p/11779672.html
