vue双括号实现
Vue 双括号语法基础
Vue 的双括号语法 {{ }} 是文本插值的核心方式，用于将数据绑定到 DOM 文本内容中。双括号内的内容会被替换为对应数据属性的值，并随数据变化自动更新。
<div id="app">
<p>{{ message }}</p>
</div>new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});表达式支持
双括号内支持 JavaScript 表达式，但不支持语句或流程控制（如 if/for）。常见用法包括运算、三元表达式或调用方法：
<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>指令补充场景
若需根据条件动态切换 DOM 结构（如 v-if）或循环渲染列表（如 v-for），需使用 Vue 指令而非双括号：
<div v-if="seen">Now you see me</div>
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>原始 HTML 插值
双括号会将数据解释为纯文本。如需输出 HTML，需使用 v-html 指令：
<p>{{ rawHtml }}</p> <!-- 输出为文本 -->
<p v-html="rawHtml"></p> <!-- 渲染为 HTML -->动态属性绑定
双括号不能用于 HTML 属性（如 id/class）。动态属性需通过 v-bind 或简写 : 实现：
<div v-bind:id="dynamicId"></div>
<button :disabled="isButtonDisabled">Button</button>注意事项
-
一次性插值：通过
v-once指令可使插值仅渲染一次，后续数据变化不再更新：<span v-once>{{ message }}</span> -
XSS 风险：直接插值用户输入内容时需警惕跨站脚本攻击，避免使用
v-html渲染不可信内容。 -
兼容性：Vue 3 中仍支持双括号语法，但组合式 API 的模板逻辑通常优先通过
ref/reactive管理状态。
