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;
}