Vue.js v-show和其他类似的东西不适用于<；模板>；

我试着让一个div在你点击它的时候出现一个v-show指令，但是没有任何效果，也不知道为什么

代码如下：

<template>
  <section class="hero is-fullheight homepage-section">
    <columns style="height: 100vh; margin: 0">
      <column v-show="isShow" class="domain-column is-9" position="relative">
        <div class="video-background">
          <div class="video-foreground">
            <iframe
              src="https://XXXX?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1"
              frameborder="0"
              allowfullscreen
            ></iframe>
          </div>
        </div>
      </column>
      <column
        class="domain-column is-3"
        position="relative"
        style="background: rgba(25, 28, 33, 0.90);"
      >
        <div
          class="columns is-vcentered text-center"
          style="display: flex; color: white;"
          fillheight
        >
          <div>
            <p class="list-item menu-item">
              ABOUT
            </p>
            <p class="list-item menu-item">
              WORK
            </p>
            <p @click="test" class="list-item menu-item">
              POLES
            </p>
            <p class="list-item menu-item">
              CONTACT
            </p>
          </div>
        </div>
      </column>
    </columns>
  </section>
</template>

<script>
export default {
  layout: 'homepage',
  data: {
    isShow: true
  },
  methods: {
    test() {
      console.log('hello!', this, this.isShow);
      alert('test function => ' + this.isShow);
      this.isShow =  !this.isShow;
    },
    goToPage(domain) {
      this.$router.push(`/${domain}`)
    }
  },

  head() {
    return {
      title:
        'Walter',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            'Walter'
        }
      ]
    }
  }
}
</script>

关于


工作


极点


接触

导出默认值{
布局：'主页'，
数据：{
伊莎：是的
},
方法：{
测试（）{
log（'hello！'，this，this.isShow）；
警报（'test function=>'+this.isShow）；
this.isShow=！this.isShow；
},
goToPage（域）{
这是。$router.push（`/${domain}`）
}
},
总目（）{
返回{
标题：
“沃尔特”，
元：[
{
hid：“描述”，
名称：'说明'，
内容：
“沃尔特”
}
]
}
}
}

你能帮我理解为什么当我点击它时这件事不会发生吗？单击

POLES

时，事件

isShow

在真与假之间变化

如果我这样做，还有一个例子：你好：{{msg}

消息将不会显示。

好的，各位

我发现了我的错误！这是一个非常新手的错误：

data: {
    isShow: true
  }

不行，我想我明白为什么。如果我使用我的react概念，我可以假设这是因为组件的“状态”（很明显，很抱歉，这是我第一次使用vue，我了解了我的错误），但在几篇文档之后，我了解了更多关于vue的信息，上面写的数据是作为函数工作的，而不是像我想的那样作为对象工作的

像这样：

data() {
    return { isShow: true }
  }

事实上，这是因为每次使用组件时，都会创建一个新的组件实例。因此，组件有自己的状态，因此，如果你有50个相同组件的渲染，它们将有自己的属性。 这是一个多么大的误解，但我知道我发现了我的问题，这看起来非常合乎逻辑和自然！我很高兴

希望这个回答能帮助像我这样的新手

---

谢谢所有试图帮助我的人。

你试过使用

v-if

吗？我不认为

iframe

会喜欢

v-show

的CSS排列。是的，我尝试了

v-if

，但什么都不做……msg是什么？vue是否已实际安装并正在使用？你能创建一个吗？msg在当前代码中什么都没有，但它只是解释我在数据中得到的事件

msg

，并想在代码中插入动态消息。这是不可能的。。。很难复制，因为我经常使用npm1。您是否没有看到关于

数据
不是函数的控制台警告？2.如果您完全删除
v-show
，您能看到内容吗？3.仅出于调试目的，请尝试将
{{isShow}
放在文本
POLES
旁边，以便您可以在模板中看到
isShow
的值。4.尝试检查开发人员工具中的元素，以查看在何处应用了哪些样式
v-show
应显示为
style=“display:none”
。检查当
isShow
更改时是否切换。