1、效果预览
2、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="app"> <!--<h2>{{title}}</h2>--> <li v-for="(item,index) in productList"> <div >产品名称：{{item.productName}}</div> <a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item);"> </a> </li> </div> <script src="js/lib/vue.min.js"></script> <script src="js/lib/vue-resource.min.js"></script> <script src="js/cart.js"></script> </body> </html>
3、cart.js
/** * Created by kk on 2017/4/16. */ new Vue({ el:"#app", data:{ // title:"hello vue" totalMoney:0, productList:[] }, filters:{ formatMoney:function (value) { return "￥"+value.toFixed(2) } }, mounted:function () { //类似于jquery中的ready方法 this.$nextTick(function () { this.cartView(); }) }, methods:{ selectedProduct:function (item) { //alert("1"); if(typeof item.checked=="undefined"){ //Vue.set(item,"checked",true);//全局注册checked this.$set(item,"checked",true);//局部注册checked } else { item.checked=!item.checked; } } } }); Vue.filter("money",function (value,type) { return "￥"+value.toFixed(2)+type; });
4、index.css
img { width: 50px; } a { font-size: 30px; color: #000; text-decoration: none; } .check{ background: #EE7A23; border-color: #EE7A23; } .item-check-btn { display: inline-block; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; text-align: center; vertical-align: middle; cursor: pointer; }