一、v-show

根据条件的真假在 Vue 项目中显示和隐藏内容，你可以使用 v-show 指令。v-show 指令切换元素的css display 属性进行显示和隐藏。

const app = Vue.createApp({
  data: () => ({ display: true }),
  methods: {
    toggleText() {
this.display = !this.display;
    }
  },
  template: `
  <div>
    <h1 v-show="display">Hello!</h1>
    <button @click="toggleText()">Toggle</button>
  </div>
  `
}).mount('#content');

二、v-bind:class

v-show 指令适用于大多数情况。但是如果你想要更细粒度地控制元素的隐藏方式，比如使用 height: 0px; 去隐藏元素。或 opacity: 0；您可以使用 v-bind:class 有条件的动态的添加和删除 class 属性。

.hide {
  display: none;
}

const example = Vue.createApp({
  data: () => ({ hide: true }),
  methods: {
    toggleText() {
      this.hide = !this.hide;
    }
  },
  template: `
  <div>
    <h1 v-bind:class="{hide:hide}">Hello!</h1>
    <button @click="toggleText()">Toggle</button>
  </div>
  `
}).mount('#example');

三、v-if

v-if 指令类似于 v-show。主要区别在于 v-if 从 DOM 中卸载元素，而 v-show 只是隐藏它。

const example1 = Vue.createApp({
  data: () => ({ display: true }),
  methods: {
    toggleText() {
      this.display = !this.display;
    }
  },
  template: `
  <div>
    <h1 v-if="display">Hello!</h1>
    <button @click="toggleText()">Toggle</button>
  </div>
  `
}).mount('#example1');

请记住，当 v-if 表达式从 false 变为 true 时，v-if 将触发 v-if 下包含的任何组件。

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载