Vue.js 条件语句学习笔记

Vue.js 提供了一些指令和语法，可以轻松地实现条件渲染。在本文中，我们将讨论一些常见的条件语句和它们的使用。

v-if 指令

v-if 指令用于根据表达式的值来条件性地渲染元素。当表达式的值为 true 时，元素被渲染；当表达式的值为 false 时，元素不被渲染。

htmlCopy Code
<template>
  <div>
    <p v-if="showMessage">Hello, World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    };
  }
};
</script>

上述代码中，<p> 元素只有在 showMessage 的值为 true 时才会被渲染。

v-else 指令

v-else 指令与 v-if 搭配使用，用于渲染一个“否则”块。v-else 元素必须紧跟在带 v-if 或 v-else-if 的元素之后，并且没有任何间隔。

htmlCopy Code
<template>
  <div>
    <p v-if="showMessage">Hello, World!</p>
    <p v-else>No message to show.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: false
    };
  }
};
</script>

上述代码中，<p> 元素只有在 showMessage 的值为 true 时才会被渲染，否则将渲染下一个 <p> 元素。

v-else-if 指令

v-else-if 指令与 v-if 和 v-else 搭配使用，用于在多个条件之间切换。与 v-if 相同，v-else-if 块必须紧跟在带 v-if 或 v-else-if 的元素之后，并且没有任何间隔。

htmlCopy Code
<template>
  <div>
    <p v-if="score >= 90">A</p>
    <p v-else-if="score >= 80">B</p>
    <p v-else-if="score >= 70">C</p>
    <p v-else-if="score >= 60">D</p>
    <p v-else>F</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    };
  }
};
</script>

上述代码中，根据不同的分数段，渲染出不同的成绩等级。

v-show 指令

v-show 指令与 v-if 类似，用于条件性地显示元素。与 v-if 不同的是，无论表达式的值是什么，元素总是存在于 DOM 中，只是简单地通过 CSS 样式进行显示或隐藏。

htmlCopy Code
<template>
  <div>
    <p v-show="showMessage">Hello, World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    };
  }
};
</script>

上述代码中，<p> 元素会一直存在于 DOM 中，只是在 showMessage 的值为 false 时隐藏。

以上就是 Vue.js 条件语句的基本用法及实例。希望能对你理解和使用条件语句有所帮助！