本小节中,我们将学习 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 + "2222" }}</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: '11111'
})
</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: '123'
})
</script>
input
标签中的 v-model
指令用于将输入框内的值与 title
绑定在一起,当我们修改输入框内的值的时候,title
的值也会随之变化。实际演示效果图如下: