小编练习哀求：在原有表格根本上，新增一项是否选中该商品的功能，总价变为只打算选中商品的总价，同时供应一个全选的按钮。
实现思路：按照vue数据和dom元素双向绑定的特性，定义allCheckStatus变量与表格全选框绑定，list数组内每一个元素定义checked字段与表格每一行选中状态绑定，定义allCheck方法，绑定全选框点击事宜，通过操作allCheckStatus与checked字段值，实现全选效果回顾： 已经不写前端良久了，最近要换事情，一贯想学学vue，终于有韶光学学。
回忆下几年前最初写前真个时候，是最大略的jquery+dom原生操作，语法上十分繁琐，也不利于掩护，一样平常拿到一个需求之后，先是画静态页面，然后将数据变动部分拿出来，写 ajax要求后台接口，拿到数据之后，动态拼接html字符串，末了append到对应html元素上。
页面效果看起来不足流畅，同时后期掩护起来特殊麻烦，须要一点一点去扣html标签；后来写过jsp的el表达式，也写过html的template模板语法，比原来拼接html字符串进步了不少，不过还是有很多操作dom元素的代码，同时也无法实现数据与dom元素的双向绑定感想： 刚开始看到这个练习题的时候，脑袋里瞬间有了思路，定义一个全选框，监听下事宜，获取到每一行的dom元素，循环去修正选中状态值。
转念一想，vue是实现数据与dom元素的双向绑定，只管即便避免操作dom元素，根据这一特性，改变实现办法，通过数据去驱动dom元素的状态改变。
vue的核心思想说是借鉴了MVVM模型，刚开始学，理解还不是很透彻，后续有新的想法再记录下来,下面附上源码，如有bug，敬请示正。

&lt;!DOCTYPE html><html><head> <meta charset=&#34;utf-8"> <title>hello world</title> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script src="../js/vue.js"></script></head><body> <div id="demo_table" v-cloak> <template v-if="list.length"> <table> <thead> <th>序号</th> <th>商品名称</th> <th>商品单价</th> <th>购买数量</th> <th>操作</th> <th>全选 <input type="checkbox" :checked="allCheckStatus" @click="allCheck()"></th> </thead> <tbody> <tr v-for="item,index in list"> <td>{{index + 1}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button @click="handleReduce(index)" :disabled="item.count==1"> -</button> {{item.count}} <button @click="handleIncrease(index)">+</button> </td> <td> <button @click="handleDelete(index)">移除</button> </td> <td> <input type="checkbox" :checked="item.checked" @change="change(index)"> </td> </tr> </tbody> </table> <div> 商品总价:{{totalPrice}} </div> </template> <div v-else>列表为空</div> </div> <script src="../js/demo.js"></script></body></html>

var demo_table = new Vue({ el: "#demo_table", data: { //全选状态，与全选按钮绑定 allCheckStatus: true, list: [{ "name": "ja", "price": 1029, "count": 100, "checked": true }, { "name": "book2", "price": 1029, "count": 1, "checked": true }, { "name": "book3", "price": 1876, "count": 19, "checked": true }] }, methods: { handleReduce: function (index) { this.list[index].count--; }, handleIncrease: function (index) { this.list[index].count++; }, handleDelete: function (index) { this.list.splice(index, 1); }, //全选点击事宜 allCheck: function () { for (var i = 0; i < this.list.length; i++) { if (this.allCheckStatus) { this.list[i].checked = false; } else { this.list[i].checked = true; } } if (this.allCheckStatus) { this.allCheckStatus = false; } else { this.allCheckStatus = true; } }, //每行选中状态切换事宜 change : function(index){ if(this.list[index].checked){ this.list[index].checked = false; } else { this.list[index].checked = true; } } }, computed: { totalPrice: function () { var total = 0; for (var i = 0; i < this.list.length; i++) { if(this.list[i].checked){ total += this.list[i].price; } } return total; } }});

jsp全选按钮Vuejs实战 第五章演习一 AJAX