Vue初始化v-if不生效问题。

qq_37607348

于 2021-05-25 18:02:37 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js jquery

本文链接：https://blog.csdn.net/qq_37607348/article/details/117261358

vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客探讨了在Vue.js应用中如何使用Vuex状态管理来实现客源和房源的动态切换。示例代码展示了如何根据从Vuex接收的`switchStatus`值来显示客源或房源文本。当`switchStatusNew`的类型不是Boolean时，`v-if`指令将不会响应。此示例强调了正确处理和响应Vuex状态变化的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <van-button round type="info" @click="switchFun">
        <p class="" v-show="switchStatusNew">客源</p>
        <p v-show="!switchStatusNew">房源</p>
    </van-button>
</template>

<script>
 data() {
    return {
      // 客源，房源切换
      switchStatusNew: true,
    };
  },
  created() {
    this.switchStatusNew = this.$store.state.switchStatus;
  },
</script>

判断Vuex传递过来的值的类型是否为Boolean。

console.log(typeof this.switchStatusNew);

如果不是Boolean，v-if是不会响应的。