Vue3 v-text 指令

Vue3 内置指令

v-text 指令用于更新元素的文本内容，相当于设置 DOM 元素的 textContent 属性。

基本说明

v-text 指令会将其绑定表达式的值设置为元素的文本内容。它是 Vue 模板中最常用的文本插值 {{ }} 的另一种写法。

期望类型: string
作用: 更新元素的文本内容，相当于设置 textContent 属性。

基本用法

实例

<span v-text="message"></span>

<span>{{ message }}</span>

实例

<template>
<div>
<p v-text="greeting"></p>
<p>使用花括号：{{ greeting }}</p>
</div>
</template>

<script>
export default {
data() {
return {
greeting: 'Hello Vue!'
}
}
}
</script>

v-text 与花括号的区别

v-text 和 {{ }} 花括号插值的主要区别在于：

{{ }} 可以在文本节点和属性中使用
v-text 只能用于元素的文本内容
v-text 会覆盖元素中原有的文本内容

实例

<span v-text="message">原有文本会被覆盖</span>


<span>前缀 {{ message }} 后缀</span>

使用场景

1、简单的文本绑定

当只需要显示文本而不需要混合其他内容时，v-text 是一个清晰的选择：

实例

<template>
<div>
<h1 v-text="pageTitle"></h1>
<span v-text="userName"></span>
</div>
</template>

<script>
export default {
data() {
return {
pageTitle: '用户中心',
userName: '张三'
}
}
}
</script>

2、与 v-once 配合使用

v-text 可以与 v-once 配合使用，只渲染一次，后续不更新：

实例

<template>
<div>

<p v-once v-text="staticText"></p>

<p v-text="dynamicText"></p>
<button @click="updateText">更新文本</button>
</div>
</template>

<script>
export default {
data() {
return {
staticText: '静态文本，只渲染一次',
dynamicText: '动态文本，会更新'
}
},
methods: {
updateText() {
this.dynamicText = '文本已更新：' + new Date().toLocaleTimeString()
}
}
}
</script>

注意事项

覆盖原有内容：v-text 会完全覆盖元素内的所有文本内容。如果只需要更新部分文本，应使用花括号插值 {{ }}。

HTML 转义：v-text 会将内容作为纯文本处理，不会解析 HTML 标签。如果需要渲染 HTML，应使用 v-html 指令。

实例

<span v-text="'<b>粗体</b>'"></span>


<span v-html="'<b>粗体</b>'"></span>