Vue修改数据后未重渲染，如何解决v-if/v-else切换失效问题？

你的代码问题出在按钮的点击事件绑定上，直接修改这一处就能解决：

修正后的完整代码 #

<template>
    <div v-if="bool">
        true
    </div>
    <div v-else>
        false // if button pressed, i should be shown!!!!
    </div>
    <button @click='onClickEvent'>click!!!!!!</button>
</template>
<script>
    export default {
        data: function () {
            return {
                bool: true
            };
        },
        methods: {
            onClickEvent: function(){
                this.bool= false
            }
        }
    };
</script>

问题原因 #

你原本用了:click='onClickEvent()'，这里的:click是Vue的动态属性绑定语法，不是事件绑定。而且onClickEvent()会在组件初始化时就立刻执行一次，之后点击按钮不会再触发这个方法，导致bool值始终是true，v-if/v-else自然不会切换。

正确的写法是用@click（v-on:click的简写）绑定事件，并且绑定方法时不需要加括号（加括号会变成立即执行）。

内容的提问来源于stack exchange，提问作者Gloomy Young