当使用data、props或者vuex保存的布尔值来给v-if和v-show赋值,如:
却发现当我们用命令改变loginState时(true变flase),v-if的判断并没有消失。这里的v-if和v-show突然失效了。
(v-if代码)
(改变loginState的代码)
此时我们再看前端展示:
我们可以看到loginState是true,所以界面显示登陆界面,但是当我们点击登录后
可以看到loginState由true变成了false,但是登录界面并没有消失。此时确定v-if失效,在值为false时组件并没有消失。
我们回归基础知识,v-if判断的值为布尔值。我们用console.log(typeof this.$store.state.loginState)方法看一下我们的false的类型。
发现false是string类型,所以当true变为false时,样式并没有改变,组件也没有消失。
我们使用Boolean(this.$store.state.loginState),将String转化为布尔值后,就可以成功了运用v-if了。