<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
li.selected{
border: 1px solid;
}
/*斗篷*/
[v-cloak]{
display: none;
}
</style>
<body >
<div id="app" v-cloak>
<ul>
<li @click="click_me(k)" v-for="(v,k) in books" :style="{color:v.color,fontSize:v.size}" class="demo" :class="{selected:v.is_selected}"> {{ v.name }}</li>
</ul>
<div>总价{{ total_price }}</div>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
el : "#app",
data : {
books : [
{name:'22',price:33,size:18,color:"blue",is_selected:false},
{name:33,price:12,size:14,color:"red",is_selected:false}
]
},
methods : {
click_me : function (k) {
this.books[k].is_selected = !this.books[k].is_selected;
},
},
// 计算属性
computed : {
total_price : function(){
var total_price = 0;
for(var i in this.books){
total_price += this.books[i].price;
}
return total_price;
}
}
})
</script>
</html>
