效果图：
使用技术：v-for v-bind v-on实现简单的列表选中绑定操作
代码：
<!DOCTYPE html> <html> <head> <Meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style> .green { background: greenyellow; border-radius: 5px; } .pink { background: deeppink; border-radius: 5px; } #Box { border-radius: 5px; font-family: 黑体; width: 300px; height: 400px; background: cadetblue; } .item { text-align: center; width: 240px; height: 40px; margin-top: 10px; line-height: 40px; } </style> </head> <body> <div id="Box" align="center"> <h1 style="padding-top: 20px;">Services</h1> <div class="item s1" v-for="(item,index) in cart" v-on:click="ok(index)" v-bind:class="{pink:!item.bol,green:item.bol}"> <p>{{ item.name }} ------ {{ item.price }}--{{ item.bol }}</p> </div> <hr> <p style="float: left;margin-left: 50px;">Total:</p> <p style="float: right;margin-right: 50px;">{{ total }}</p> </div> </body> </html> <script> var vm = new Vue({ el: ‘#Box‘,data: { cart: [{ name: ‘Computer‘,price: 5000,bol: false },{ name: ‘Keybord‘,price: 200,{ name: ‘Mouse‘,price: 20,{ name: ‘disk‘,price: 2000,],total: 0 },methods: { ok: function(index) { this.cart[index].bol = !this.cart[index].bol this.total = 0 for (var i = 0; i < this.cart.length; i++) { if (this.cart[i].bol) this.total += this.cart[i].price } } } }) </script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
