Vue3中元素不响应数据变更——v-if指令失效问题求助

嗨，我刚仔细看了你的代码，一下子就找到问题所在啦！你的逻辑本身是对的，但没有把变量声明成Vue3的响应式数据，导致修改值的时候Vue根本没察觉到变化，自然不会更新页面～

在Vue3的<script setup>语法里，直接用let声明的普通变量（比如你这里的show_heading）不是响应式的。Vue的响应式系统需要通过特定的API来包装数据，才能追踪它的变化并触发视图更新。针对你这个布尔值变量，最适合用ref来处理。

给你改好的完整代码：

<script setup>
import { ref } from 'vue'

// 用ref包装成响应式变量
let show_heading = ref(true);

function toggleHeading(){
  // 修改ref变量要访问.value属性
  show_heading.value = !show_heading.value;
  // 你原来的异或写法也可以改成 show_heading.value ^= true，效果完全一致
}
</script>

<template>
<h1 v-if="show_heading">Hello world is working</h1>
<button class="btn btn-primary" @click="toggleHeading">Toggle heading</button>
</template>

<style scoped>
</style>

简单解释下改动点：

• 首先导入Vue提供的ref函数，用来包装简单类型的响应式数据
• 把let show_heading=true改成let show_heading = ref(true)，这样它就变成了一个响应式的引用对象
• 在修改值的时候，必须通过.value属性来访问和修改，因为ref包装后的数据会被存到这个属性里（不过在<template>里不用写.value，Vue会自动帮你解包）

这样修改之后，点击按钮时show_heading的变化就能被Vue追踪到，v-if控制的标题也会正常显示/隐藏啦！

备注：内容来源于stack exchange，提问作者Sharif Hasan