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

最新推荐文章于 2024-04-18 17:50:48 发布

原创最新推荐文章于 2024-04-18 17:50:48 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #jquery

vue 专栏收录该内容

4 篇文章

订阅专栏

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

<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是不会响应的。