vue双括号实现

Vue 双括号语法基础

Vue 的双括号语法 {{ }} 是模板插值的基础形式，用于将数据绑定到 DOM。双括号内可以包含单个 JavaScript 表达式，Vue 会将其求值结果替换到 DOM 中。

<div>{{ message }}</div>

动态内容绑定

双括号内支持动态数据绑定，当数据变化时视图自动更新。例如绑定组件实例的 data 属性：

data() {
  return {
    message: 'Hello Vue!'
  }
}

表达式支持

双括号内支持有限的 JavaScript 表达式，包括运算、三元表达式等：

<div>{{ count + 1 }}</div>
<div>{{ isActive ? 'Yes' : 'No' }}</div>

过滤器使用（Vue 2.x）

Vue 2.x 支持通过管道符 | 使用过滤器处理插值内容：

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

filters: {
  capitalize: function (value) {
    if (!value) return ''
    return value.toString().toUpperCase()
  }
}

指令与双括号结合

双括号可与指令如 v-bind 结合使用，实现动态属性绑定：

<div v-bind:title="'Title: ' + message">{{ message }}</div>

注意事项

双括号语法会将内容解释为纯文本而非 HTML。如需输出 HTML 需使用 v-html 指令：

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

性能优化

频繁更新的内容建议使用计算属性而非复杂表达式：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

<div>{{ reversedMessage }}</div>