Vue:插值表达

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 的使用场景。