极客观点
项目管理
HarmonyOS
点击了之后，总金额可以立即更新过来，可是为什么增加的color类没有立即应用到a标签上，等下一次再点击下一条的时候，上一条的color类才会被应用上？为啥呀？
代码如下：
<!doctype html>
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳实践3</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.color {
background: #E35885;
}
</style>
</head>
<body>
<div style="width:500px;margin-top: 20px;margin-left: 20px;" id="main">
<a href="#" v-on:click="change" class="list-group-item active">商品总金额: {{total}}
<div></div>
</a>
<template v-if="ok">
<div v-for="food in foods">
<a href="#" v-bind:class="{'color':food.isClick}" class="list-group-item" v-on:click="UpdateTotal(food)">{{food.name}}
<span style="float:right" class="label label-default">￥{{food.price}}</span>
</a>
</div>
</template>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="vue.js"></script>
<script type="text/javascript">
window.onload = function() {
//alert(1);
var data = {
ok: 1,
total: 0,
foods: [{
name: '苹果',
status: false,
price: 15,
isClick: false
}, {
name: '梨子',
status: false,
price: 10,
isClick: false
}, {
name: '殷桃',
status: false,
price: 22,
isClick: false
}, {
name: '西瓜',
status: false,
price: 13,
isClick: false
}]
};
var demo = new Vue({
el: '#main',
data: data,
methods: {
change: function() {
this.ok = !this.ok;
},
UpdateTotal: function(food) {
food.isClick = !food.isClick;
food.status = !food.status;
if (food.status == true) {
data.total += (Math.abs(food.price));
} else {
data.total += (-Math.abs(food.price));
}
}
}
});
}
</script>
</body>
</html>
直接复制粘贴到html文件里就可以预览了。
我稍微改了下，问题出在a标签的href属性上，取消href属性或替换为其他标签就没有问题了