湘潭做网站 i磐石网络西安有几个区

Vue 的插值表达式是数据绑定的基础形式，它通过 {{ }} 将 JavaScript 数据动态渲染到模板中。下面通过代码示例，直观感受它的用法和限制。

---

基础用法

<template>＜div＞<!-- 直接显示数据 --><p＞{{ message }}＜/p＞<!-- 使用表达式计算 --><p＞{{ score * 10 }}＜/p＞<!-- 三元运算符 --><p＞{{ isPass ? '及格' : '不及格' }}＜/p＞＜/div＞
</template＞<script＞
export default {data() {return {message: "Hello Vue!",score: 8,isPass: true};}
};
</script＞

---

调用方法或计算属性

插值中可以调用组件的方法或计算属性：

<template＞＜div＞<!-- 调用方法 --><p＞{{ formatDate(new Date()) }}＜/p＞<!-- 使用计算属性 --><p＞{{ reversedMessage }}＜/p＞＜/div＞
</template＞<script＞
export default {data() {return { message: "Hello" };},methods: {formatDate(date) {return date.toLocaleDateString(); // 返回格式化日期}},computed: {reversedMessage() {return this.message.split('').reverse().join(''); // 反转字符串}}
};
</script＞

---

错误用法示例

插值中不能写语句，以下代码会报错：

<!-- 错误：使用了 if 语句 -->
<p＞{{ if (isPass) { return '通过' } }}＜/p＞<!-- 错误：试图定义变量 -->
<p＞{{ let a = 1 }}＜/p＞

---

XSS 防护示例

默认转义 HTML 标签，防止脚本攻击：

<template＞＜div＞<!-- 显示纯文本 --><p＞{{ rawHtml }}＜/p＞       <!-- 输出：<script>alert(1)＜/script＞ --><!-- 使用 v-html 渲染 HTML --><p v-html="rawHtml"＞＜/p＞  <!-- 实际会执行 script 代码（需谨慎！） -->＜/div＞
</template＞<script＞
export default {data() {return { rawHtml: "<script>alert(1)＜/script＞" };}
};
</script＞

---

插值与指令的对比

<!-- 插值表达式：直接替换内容 -->
<p＞{{ message }}＜/p＞<!-- 属性绑定需用 v-bind -->
＜div v-bind:id="dynamicId"＞＜/div＞<!-- 错误写法：直接在属性中用插值 -->
＜div id="{{ dynamicId }}"＞＜/div＞  <!-- 无法生效！ -->

---

总结

通过这些代码示例可以看出：

1. 插值表达式适合简单逻辑，复杂逻辑应交给计算属性或方法。
2. 避免在模板中写 JavaScript 语句，保持模板简洁。
3. 默认的 XSS 防护机制让渲染更安全，但需注意 v-html 的使用场景。