Vue 3 文本插值(图文讲解)

更新时间 2023-05-10 08:32:52

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动

目前, 星球 内第一个项目:全栈前后端分离博客项目,演示地址:http://116.62.199.48/, 1.0 版本已经更新完毕,正在更新 2.0 版本。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 224 小节,累计 35w+ 字,讲解图:1544 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1000+ 小伙伴加入,欢迎点击围观

前言

大家好,我是小哈~

本小节中,我们将学习 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 的值也会随之变化。实际演示效果图如下: