内容渲染指令

内容渲染指令用于渲染DOM元素的内容。

常见的内容渲染指令如下。

• v-text

• v-html

1. v-text

v-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对其进行解析。v-text的语法格式如下。

<标签名 v-text="数据名"></标签名>

演示v-text的使用方法

<template>
  <div v-text="message"></div>
</template>
<script setup>
const message = '<span>咬定青山不放松，立根原在破岩中</span>'
</script>

2. v-html

在使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，则可以使用v-html。v-html用于渲染DOM元素的HTML内容，其用法与v-text相似。v-html的语法格式如下。

<标签名 v-html="数据名"></标签名>

演示v-html的使用方法

<template>
  <div v-html="html"></div>
</template>
<script setup>
const html = '<strong>千磨万击还坚劲，任尔东西南北风</strong>'
</script>

条件渲染指令

在Vue中，当需要根据不同的判断结果显示不同的DOM元素时，可以通过条件渲染指令来实现。条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。

条件渲染指令如下。

• v-if

• v-show

1. v-if

v-if是根据布尔值切换元素的显示或隐藏状态，本质是通过操作DOM元素来切换显示状态。

• 当给定的值为true时，元素存在于DOM树中；

• 当给定的值为false时，元素从DOM树中移除。

v-if有两种使用方式。

（1）直接给定一个条件，控制单个元素的显示或隐藏

<标签名 v-if="条件"></标签名>

（2）通过v-if结合v-else-if、v-else来控制不同元素的显示或隐藏

<标签名 v-if="条件A">展示A</标签名>
<标签名 v-else-if="条件B">展示B</标签名>
<标签名 v-else>展示C</标签名>

演示v-if的使用方法

<template>
  小明的学习评定等级为：
  <p v-if="type === 'A'">优秀</p>
  <p v-else-if="type === 'B'">良好</p>
  <p v-else>差</p>
  <button @click="type = 'A'">切换成优秀</button>
  <button @click="type = 'B'">切换成良好</button>
  <button @click="type = 'C'">切换成差</button>
</template>
<script setup>import { ref } from 'vue'
const type = ref('B')
</script>

2. v-show

v-show与v-if都用来决定某一个元素是否在页面上显示出来。

v-show的原理是通过为元素添加或移除display: none样式来实现元素的显示或隐藏。

当需要频繁切换某个元素的显示或隐藏时，使用v-show会更节省性能开销；而当只需要切换一次显示或隐藏时，使用v-if更合理。

演示v-show的使用方法

<template>
  <p v-if="flag">通过v-if控制的元素</p>
  <p v-show="flag">通过v-show控制的元素</p>
  <button @click="flag = !flag">显示/隐藏</button>
</template>
<script setup>
import { ref } from 'vue'
const flag = ref(true)
</script>

事件绑定指令

在Vue开发中，有时需要给DOM元素绑定事件，从而利用事件实现交互效果，这时可以利用事件绑定指令v-on来实现。v-on的语法格式如下。

<标签名 v-on:事件名="事件处理器"></标签名>

在上述语法格式中，事件名即DOM中的事件名，例如click、input、keyup等；事件处理器可以是方法名或内联JavaScript语句。如果逻辑复杂，事件处理器建议使用方法名，方法需要在<script>标签中定义；如果逻辑简单，只有一行代码，则可以使用内联JavaScript语句。

演示v-on的使用方法

<template>
  <button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {
  console.log('欢迎来到Vue.js的世界！')
}
</script>

事件对象的使用

事件中使用Vue数据

事件指令的简写

另外，v-on还有简写形式，可以将“v-on:事件名”简写为“@事件名”。

属性绑定指令

在Vue开发中，有时需要绑定DOM元素的属性，从而更好地控制属性的值，此时可以使用属性绑定指令v-bind来实现。v-bind的语法格式如下。

<标签名 v-bind:属性名="数据名"></标签名>

v-bind还支持将属性与字符串拼接表达式绑定，示例代码如下。

<div :id="'list' + index"></div>

演示v-bind的使用方法

<template>
  <p><input type="text" v-bind:placeholder="username"></p>
  <p><input type="password" :placeholder="password"></p>
</template>
<script setup>
const username = '请输入用户名'
const password = '请输入密码'
</script>

v-bind的简写

列表渲染指令

在开发购物应用时，为了方便用户查找商品信息，通常会以商品列表的形式展示商品信息。在商品列表中，每件商品的结构都是相同的，如果每件商品的结构都要手动定义，会非常麻烦。为此，Vue提供了列表渲染指令v-for。开发者只需在模板中定义一件商品的结构，v-for便会根据开发者提供的数据自动渲染商品列表中所有的商品。

使用v-for循环渲染列表

1.  根据数组渲染列表

<标签名 v-for="(item, index) in arr"></标签名>

演示使用v-for根据一维数组渲染列表

<template>
  <div v-for="(item, index) in list" :key="index">
    索引是：{{ index }} --- 元素的内容是：{{ item }}
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive(['HTML', 'CSS', 'JavaScript'])
</script>

2.  根据对象渲染列表

<标签名 v-for="(item, name, index) in obj"></标签名>

演示使用v-for根据对象渲染列表

<template>
  <div v-for="(value, name) in user" :key="name">
    属性名是：{{ name }} --- 属性值是：{{ value }}
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({ id: 11, name: '小明', gender: '男' })
</script>

演示使用v-for根据对象数组渲染列表

<template>
  <div v-for="item in list" :key="item.id">
    id是：{{ item.id }} --- 元素的内容是：{{ item.message }}
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive([
  { id: 1, message: '梅', }, { id: 2, message: '兰', },
  { id: 3, message: '竹', }, { id: 4, message: '菊', }
])
</script>

3.  根据数字渲染列表

<标签名 v-for="(item, index) in num"></标签名>

4.  根据字符串渲染列表

<标签名 v-for="(item, index) in str"></标签名>

5.  key属性的使用

使用v-for（根据list数组中的元素）渲染列表后，当在list数组中删除一个元素后，index会发生变化，v-for会重新渲染列表，导致性能下降。

为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，建议通过key属性为列表中的每一项提供具有唯一性的值，示例代码如下。

<div v-for="item in items" :key="item.id"></div>

案例：TODO列表（备忘录）

效果图：

素材：

实现步骤：

双向数据绑定指令

Vue为开发者提供了v-model指令来实现双向数据绑定，使用它可以在input、textarea和select元素上创建双向数据绑定，它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。v-model的语法格式如下。

<标签名 v-model="数据名"></标签名>

例如，使用v-model实现输入框的值与变量保持同步，示例代码如下。

<input v-model="info">

v-model内部会为不同的元素绑定不同的属性和事件，具体如下：

（1）textarea元素和text类型的input元素会绑定value属性和input事件。

演示v-model的使用方法

<template>
  请输入姓名：<input type="text" v-model="username">
  <div>姓名是：{{ username }}</div>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
</script>

（2）radio类型的input元素会绑定checked属性和change事件。                          

（3）checkbox类型的input元素和radio类型的input元素会绑定checked属性和change事件。

（4）select元素会绑定value属性和change事件。

（5）v-model的修饰符

为了方便对用户输入的内容进行处理，v-model提供了3个修饰符。v-model的修饰符如下表所示。

演示.number修饰符的使用方法

修改输入框的代码，通过添加.number修饰符实现将用户输入的数字自动转换成数字类型。

<input type="text" v-model.number="n1"> 
+ 
<input type="text" v-model.number="n2">