Vue.js | v-show指令

在Vue.js中，v-show指令用于根据表达式的值（布尔类型）切换元素的显示或隐藏。它与v-if指令的不同之处在于，v-show指令始终会保留被绑定元素在DOM中，仅仅是通过修改元素的CSS属性display的值来切换元素的显示或隐藏。

语法

<element v-show="expression"></element>

其中，v-show指令后面的expression可以是任何返回布尔值的JavaScript表达式。

示例

<div v-show="isVisible">
  这个元素会根据isVisible变量的值来显示或隐藏。
</div>

export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    hideElement() {
      this.isVisible = false;
    },
    showElement() {
      this.isVisible = true;
    }
  }
};

该示例中，v-show指令被绑定在一个div元素上，该元素的显示或隐藏状态取决于isVisible变量的值。通过hideElement和showElement方法分别将isVisible变量的值设为false和true来切换元素的显示或隐藏。

总结

v-show指令在控制元素的显示或隐藏状态时比v-if指令更具有优势，因为它无需重新创建整个元素，仅仅是修改元素的CSS属性display的值，从而提高了页面渲染的效率。