条件渲染

v-if

v-if 与 v-else-if 、 v-else 配合使用，适用于切换频率低的场景：

• 语法： v-if=‘xxx’ 。
• 特点：不展示的 DOM 元素会被 直接移除。
• 注意：
  • v-if 与 v-else-if 、 v-else 要接连一起使用，否则不会被识别，结构不能被「打断」；
  • ⚠️使用 <template> </template> 模版标签可以避免结构被打断。
  • 不建议 v-for 与 v-if 一起使用。因为 v-for 会具有更高的优先级。

🌰 例子：

<h1 v-if="awesome">Vue is awesome!</h1>

🌰 例子 / 在 template 标签上使用，条件渲染模版分组：

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

可以将 <template> 元素包裹的元素看成一个元素组，当要动态显示这一部分的内容就可以使用条件渲染实现。最终渲染的结果不会包括 <template> 元素。

🌰 例子 / v-if ~ v-else 结合使用。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

🌰 例子 / v-if ~ v-else-if 的使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

🌰 例子 / 使用 key 管理可服复用的动态元素：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

原本不加 key ，因为两个模版都使用了相同的元素，切换模版时不会替换掉 <input> ，只有其中的 placeholder 特性被替换了。给模版添加一个具有一个唯一的值 key 特性，就可以实现重新渲染这个元素。

v-show

v-show ： 适用于切换频率高的场景：

• 语法： v-show=“xxx” ，
• 特点：不展示的 DOM 元素不被移除，仅仅通过 display 样式隐藏。
• 注意： v-show 不支持用于 <template> 元素。

比较 v-if 与 v-show

• v-if 是「真正」的条件渲染，会确保在切哈 u 你过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• 当需要频繁切换，使用 v-show ；因为 v-if 有着更高的切换开销，而 v-show 是是渲染开销高。

• 当初始条件不成立时， v-if 的所有子节点不会被渲染解析（在项目中使用）；只有在知道条件第一次变为真时，才会开始渲染条件块。

• 使用 v-if 时，元素可能无法获取；但使用 v-show 的元素一定可以获取（DOM 有无移除）。

列表渲染

列表渲染指令

用于遍历展示「列表」中的数据

• 语法： v-for=“(item, index) in xxx” :key="index"
• 可用于遍历：数组、对象、字符串、指定遍历次数；

🌰 例子：

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

🌰 例子 / 遍历一个对象的属性：

<ul id="v-for-object" class="demo">
  <li v-for="(name, value, index) in object">
    {{ index }}, {{ name }}: {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

列表过滤器

🌰：在列表中模糊搜索（ watch 实现与 computed 实现对比）

过滤器

• 定义：对要显示的数据进行特定格式化后再显示（适用简单逻辑的处理）；

• 语法：

  • 注册过滤器（建议全局）： Vue.filter(name, callback) （或者定义为局部过滤器 new Vue(filters:{})
  • 使用过滤器： { {var | filterName} } 或者在数据单向绑定 v-bind:属性="var | filterName" （⚠️ 不能在 v-model 中使用）；

• ⚠️ 注意：

  • 过滤器的参数问题：第一个参数要过滤的数据；第二个参数开始的额外参数可以是过滤器格式字符串（可以设置默认参数，以防没有传参）；

  • 可以多个过滤器叠加使用， 但是是逐层过滤的；

  • 没有改变原本的数据，产生新的对应的数据；

• 🌰 示例：格式化日期；

🔗 相关链接：bootcdn.cn -

日期格式化相关： moment.js/days 轻量化

在 Vue 3 中过滤已经被计算属性取代。