指令v-show和v-if

v-show

v-show是Vue.js中的一个指令，用于根据表达式的值来控制元素的显示与隐藏。当表达式的值为真时，元素会被显示出来；当表达式的值为假时，元素会被隐藏起来。

v-show的语法格式如下：

v-show="表达式"

下面是v-show的详细解析与代码实例：

1. 在元素上使用v-show指令

<div v-show="isShow">这是一个元素</div>

以上代码中，isShow是一个在Vue实例中定义的布尔类型的数据，用来控制元素的显示与隐藏。

1. 使用v-show控制列表的显示与隐藏

<ul>
  <li v-for="item in itemList" v-show="item.visible">{{ item.name }}</li>
</ul>

以上代码中，itemList是一个在Vue实例中定义的数组，其中的每个元素都包含一个visible属性，用来控制每个列表项的显示与隐藏。

1. 使用v-show条件判断

<div v-show="score >= 60">及格</div>
<div v-show="score < 60">不及格</div>

以上代码中，score是一个在Vue实例中定义的数据，根据score的值来判断元素的显示与隐藏。

需要注意的是，v-show只是控制元素的display属性，当元素被隐藏时，它仍然占据页面的空间，并没有从DOM中移除。

v-show和v-if的区别：

• v-show是通过修改元素的display属性来控制显示与隐藏，隐藏的元素仍然占据空间；
• v-if是通过添加或移除元素来控制显示与隐藏，隐藏的元素不再占据空间。

因此，如果需要频繁切换元素的显示与隐藏，可以使用v-show；如果需要根据条件动态添加或移除元素，可以使用v-if。

v-if

v-if 是 Vue.js 提供的一个指令，用于根据条件来进行条件渲染。它的用法如下：

<template>
  <div>
    <p v-if="isShow">显示内容</p>
    <p v-else>隐藏内容</p>
  </div>
</template>

当 isShow 的值为 true 时，渲染 <p>显示内容</p>；当 isShow 的值为 false 时，渲染 <p>隐藏内容</p>。

v-if 的详细解析如下：

1. 如果 v-if 的值为真，则渲染该元素；如果 v-if 的值为假，则不渲染该元素。
2. v-if 支持在同一个元素上使用 v-else 或 v-else-if，表示在 v-if 的条件不满足时渲染。
3. v-if 是惰性的，即只有在条件满足时才会进行渲染。如果初始条件为假，则不会渲染元素，直到条件变为真时才会进行渲染。
4. v-if 可以和 v-else 、v-else-if、 v-show 一起使用。
5. v-if 可以用在标签上，也可以用在组件上。

代码实例：

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <p v-if="isShow">显示内容</p>
    <p v-else>隐藏内容</p>
  </div>
</template>

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

在上面的代码中，点击按钮会切换 isShow 的值，从而改变显示内容和隐藏内容的渲染状态。