vue实现文本插值

2026-02-21 14:42:12VUE

Vue 文本插值基础

Vue 中使用双大括号 {{ }} 进行文本插值，将数据绑定到 DOM 元素中。插值内容会自动响应数据变化。

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

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

插值中使用 JavaScript 表达式

Vue 的文本插值支持简单的 JavaScript 表达式，但不支持语句或流程控制。

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

原始 HTML 插值

使用 v-html 指令可以输出原始 HTML，而不是转义后的文本。

vue实现文本插值

<div id="app">
  <p v-html="rawHtml"></p>
</div>

new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color: red">Red Text</span>'
  }
})

属性绑定插值

在 HTML 属性中使用插值，需要使用 v-bind 指令或简写 :。

<div id="app">
  <div v-bind:id="dynamicId"></div>
  <button :disabled="isDisabled">Button</button>
</div>

计算属性插值

对于复杂逻辑，可以使用计算属性进行插值。

vue实现文本插值

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

方法插值

可以在插值中调用方法，但不推荐频繁调用方法，应优先使用计算属性。

<div id="app">
  <p>{{ reverseMessage() }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

插值修饰符

Vue 提供了一些插值修饰符来改变插值行为。

<div id="app">
  <!-- 只绑定一次，不响应变化 -->
  <p v-once>{{ message }}</p>

  <!-- 防止 XSS 攻击 -->
  <p v-text="message"></p>
</div>

插值中的过滤器

Vue 2.x 支持过滤器，Vue 3 中已移除，可用方法或计算属性替代。

<!-- Vue 2.x -->
<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

// Vue 2.x
new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  filters: {
    capitalize: function(value) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})