其实在去年小颖已经写过一篇：Vue.js实现checkbox的全选和反选
小颖今天在跟着慕课网学习vue的过程中，顺便试试如何在table中实现全选和反选，页面的css样式是直接参考慕课网的样式写的，js是小颖自己写哒，欢迎大家吐槽和点赞，嘻嘻
demo的 git 地址：ShoppingCart
页面效果：
具体怎么实现的呢？
使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了，其实只是在上篇文章的基础上稍微做了改动：
App.vue文件
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
p,
blockquote,
figure,
form,
fieldset,
input,
legend,
pre,
abbr,
button {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
div,
p,
dl,
dt,
dd {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
.checkout-title {
position: relative;
margin-bottom: 41px;
text-align: center;
}
.checkout-title::before {
position: absolute;
top: 50%;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #ccc;
z-index: 0;
}
.checkout-title span {
position: relative;
padding: 0 1em;
background-color: #fff;
font-family: "moderat", sans-serif;
font-weight: bold;
font-size: 20px;
color: #605F5F;
z-index: 1;
}
</style>
home.vue文件
<template>
<div class="container">
<div class="checkout-title">
<span>购物车</span>
</div>
<table class="product_table">
<tbody>
<template v-for="(list,index) in table_list">
<tr>
<td width="7%" min-width="94px" v-if="index===0">
<input type="checkbox" v-model='checked' v-on:click='checkedAll'></td>
