v-show无论绑定是true还是false都是显示

Question

为什么v-show无论绑定是true还是false都是显示

let c1=ref(false)
我这里没有方法修改c1,c1的值一直是false，但是这个组件skuForm还是显示了，为什么

Answer 1

在Vue 3中，v-show 指令根据绑定的值决定元素是否显示。无论 c1 的值是 true 还是 false，元素都会显示，因为 v-show 使用的是CSS的 display 属性来控制显示与隐藏。如果你希望元素在 c1 为 false 时不显示，你需要确保 c1 的初始值就是 false，并且不要在元素上使用任何可能导致其显示的样式。元素div上的 style="display: none;" 是为了确保即使在初始渲染时 c1 是 false，这个元素也不会显示。如果没有这个样式，元素至少会被初始化为不可见。示例：

<template>
  <div>
    <button @click="c1 = !c1">Toggle</button>
    <div v-show="c1" style="display: none;">This will be shown or hidden depending on c1's value.</div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
const c1 = ref(false);
</script>