vue实现文本插值

文本插值的基本语法

在Vue中，文本插值通过双大括号{{ }}实现，将数据绑定到DOM元素中。例如：

<div id="app">
  {{ message }}
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

渲染结果为<div>Hello Vue!</div>。

插值表达式支持JavaScript

双大括号内可以编写简单的JavaScript表达式：

<div>{{ number + 1 }}</div>
<div>{{ ok ? 'YES' : 'NO' }}</div>
<div>{{ message.split('').reverse().join('') }}</div>

注意：只能包含单表达式，不能是语句或流程控制。

使用v-text指令替代插值

v-text指令会替换元素的整个内容：

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

等同于<span>{{ message }}</span>，但会避免未编译前的模板闪现问题。

原始HTML插值

双大括号会将数据解释为纯文本。输出HTML需使用v-html指令：

<div v-html="rawHtml"></div>

注意：动态渲染HTML可能导致XSS攻击，仅对可信内容使用。

属性插值

双大括号不能在HTML属性中使用，需通过v-bind指令：

<div v-bind:id="dynamicId"></div>

对于布尔属性，值为null、undefined或false时该属性不会被渲染。

插值修饰符

Vue提供修饰符改变插值行为：

• .once：一次性插值，数据变化不更新

  <span v-once>{{ message }}</span>

• .pre：保留原始空白符

  <div v-pre>{{ 这里不会被编译 }}</div>

动态参数插值

从2.6.0开始支持动态参数：

<a v-bind:[attributeName]="url">Link</a>

attributeName会作为JavaScript表达式动态求值。

过滤器（Vue 2.x）

Vue 2支持自定义过滤器处理文本：

<div>{{ message | capitalize }}</div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Vue 3已移除过滤器，推荐使用方法或计算属性替代。