Vue.js 中的 v-show 指令及用法详解

v-show 是 Vue.js 中的一个指令，它可以控制元素的显示和隐藏。

语法

使用 v-show 指令可以将元素的显示状态与布尔值绑定，当绑定的布尔值为 true 时元素显示，为 false 时元素隐藏。

<div v-show="showElement"></div>

示例

示例1

<template>
  <div>
    <button @click="toggleElement">{{ showElement ? '隐藏' : '显示' }}元素</button>
    <div v-show="showElement" style="height: 100px; background-color: red;"></div>
  </div>
</template>

<script>
export default {   
  data() {
    return {
      showElement: true
    }
  },
  methods: {
    toggleElement() {
      this.showElement = !this.showElement;
    }
  }
}
</script>

在这个示例中，我们定义了一个按钮和一个红色的 div。当点击按钮时，通过 toggleElement 方法切换 showElement 布尔值的值，从而控制 div 元素的显示和隐藏。

示例2

<template>
  <div>
    <h1 v-show="showTitle">标题</h1>
    <form v-show="showForm">
      <input type="text" placeholder="请输入用户名" />
      <input type="password" placeholder="请输入密码" />
      <button>登录</button>
    </form>
  </div>
</template>

<script>
export default {   
  data() {
    return {
      showTitle: true,
      showForm: false
    }
  },
  methods: {
    toggleElement() {
      this.showTitle = !this.showTitle;
      this.showForm = !this.showForm;
    }
  }
}
</script>

在这个示例中，我们定义了一个标题和一个表单。当点击某个按钮时，通过 toggleElement 方法切换 showTitle 和 showForm 布尔值的值，从而控制标题和表单元素的显示和隐藏。

总结

通过 v-show 指令，可以很方便地控制元素的显示和隐藏。它只是简单地在元素的 style 属性上切换了 display 属性的值，不像 v-if 指令一样会直接将元素从 DOM 中删除。所以，如果需要频繁切换元素的显示和隐藏，建议使用 v-show，而不是 v-if。