Vue 3 文本插值（图文讲解）

前言

大家好，我是小哈~

本小节中，我们将学习 Vue 3 中的文本插值相关功能。

文本插值语法

文本插值语法如下，通常用双大括号来表示，当其绑定的变量发生变化时，插值的内容也会随之发生变化，也就是数据双向绑定功能：

{{ 插值表达式 }}

示例：

<script setup>
import { ref } from 'vue';

// 响应式字符串变量
const title = ref('Hello, vue 3')
</script>

<template>
  <!-- 文本插值 -->
  <h1>{{ title }}</h1>
</template>

插值表达式

插值表达式支持四则运算、比较运算符、数值操作、三目运算符、数组操作、对象操作等。以下是相关示例：

<template>
  <!-- 字符串 -->
  <div>{{ obj.title }}</div>
  <div>{{ obj.num + "犬小哈教程" }}</div>
  <div>{{ obj.title.length }}</div>

  <!-- 数值 -->
  <div>{{ obj.num }}</div>
  <div>{{ obj.num + obj.num2 }}</div>
  <div>{{ obj.num > obj.num2 }}</div>
  <div>{{ obj.num.toFixed(2) }}</div>
  
  <!-- 布尔类型 -->
  <div>{{ obj.isSuccess }}</div>

  <!-- 数组 -->
  <div>{{ obj.arr }}</div>
  
  <!-- 对象 -->
  <div>{{ obj.subObj }}</div>
  <div>{{ obj.subObj.domain }}</div>
  
  <!-- 三目运算符 -->
  <div>{{ obj.isSuccess ? 'true' : 'false' }}</div>
</template>

<script setup>
import { reactive } from 'vue';

// reactive 函数用于响应式对象
const obj = reactive({
  title: 'Hello',
  num: 1,
  num2: 2,
  isSuccess: true,
  arr: [1, 2, 3, 4],
  subObj: {
    title: '犬小哈',
    domain: 'www.quanxiaoha.com'
  }
})
</script>

页面输出结果如下：

插值表达式输出结果

v-text 文本插值指令

除了使用 {{ }} 双大括号的形式外，还可以使用 v-text 指令来实现文本插值，示例代码如下：

<template>

  <!-- 纯文本 -->
  <div>{{ obj.title }}</div>
  <!-- 纯文本 -->
  <div v-text="obj.title"></div>

</template>

<script setup>
import { reactive } from 'vue';

// reactive 函数用于响应式对象
const obj = reactive({
  title: '犬小哈教程'
})

</script>

页面输出结果如下：

v-once 指令 ：只会被执行一次

v-once 指令用于执行一次性的插值，当后续绑定的变量再次发生变化时，插值处的内容不会发生任何变化, 也就是说它只会被渲染一次。示例如下：

<template>
  <!-- 随着 title 值变化而变化 -->
  <div>{{ obj.title }}</div>
  <!-- 仅会被渲染一次，不会随之变化 -->
  <div v-once>{{ obj.title }}</div>

  <!-- 输入框用于动态修改 title 变量的值 -->
  <input v-model="obj.title">
</template>

<script setup>
import { reactive } from 'vue';

const obj = reactive({
  title: '犬小哈教程'
})
</script>

input 标签中的 v-model 指令用于将输入框内的值与 title 绑定在一起，当我们修改输入框内的值的时候，title 的值也会随之变化。实际演示效果图如下：