Vue2（9） 条件渲染学习笔记

Vue 2 条件渲染学习笔记

1. 引言

在 Vue 2 中，条件渲染是一种根据表达式的值动态显示或隐藏 DOM 元素的技术。Vue 提供了 v-if、v-else、v-else-if 以及 v-show 指令来实现条件渲染。这些指令使得我们能够根据数据的变化灵活地控制元素的显示与隐藏。

2. v-if 指令

v-if 指令用于条件性地渲染某个 DOM 元素。当表达式的值为真（truthy）时，元素会被渲染到 DOM 中；当表达式的值为假（falsy）时，元素会从 DOM 中移除。

示例：

<div v-if="isVisible">这是一个条件渲染的段落。</div>
<button @click="toggle">切换显示状态</button>

<script>
new Vue({
     
     
  el: '#app',
  data: {
     
     
    isVisible: true
  },
  methods: {
     
     
    toggle()