当前位置：首页 > news >正文

Vue:插值表达

news 2025/7/2 6:57:21

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＞  <!-- 无法生效！ -->