vue.js中更改了state,为什么没有立即触发视图的更新?

前端小白de窝
  • 394

点击了之后,总金额可以立即更新过来,可是为什么增加的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文件里就可以预览了。

回复
阅读 3.7k
2 个回答

我稍微改了下,问题出在a标签的href属性上,取消href属性或替换为其他标签就没有问题了

clipboard.png

因为bootstrap 设置了.list-group-item 的 :hover,和:focus的样式,你点击后有hover和focus状态

a.color,
a.color:hover,
a.color:focus{
  background: #E35885;
}

https://jsfiddle.net/ycloud/x...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏