Vue基础教程（32）Vue.js语法之插值：摸鱼学Vue？这篇插值“骚操作”让你工资翻倍！[特殊字符]

一、前言：为什么你的网页需要“插值”这种魔法？

还记得小时候玩过的填空游戏吗？纸上写着“__（名字）今天吃了（数字）__个包子”，填上不同内容就能瞬间变成专属故事。Vue的插值说白了就是给网页做填空题！比如这段代码：

<div>嘿，{{ userName }}！你今天摸了{{ fishCount }}条鱼~</div>

当userName是"程序员小张"、fishCount是3时，页面就会显示：嘿，程序员小张！你今天摸了3条鱼~ 但若数据变成"设计师Lisa"和5，页面无需重写就能自动刷新——这就是Vue数据绑定的魔力！

💡 冷知识：传统JavaScript要实现同样效果，得写document.getElementById('text').innerHTML = ...，而Vue让你省下敲键盘的时间去摸鱼（误）。

二、Mustache语法：双大括号才是YYDS！

2.1 基础用法：把数据当“替身演员”

Mustache（胡子语法？）因{{ }}长得像胡子得名。它是最简单的插值方式，直接召唤数据：

<template>
  <div>
    <p>公司名称：{{ companyName }}</p>
    <p>年终奖：{{ bonus }}个月工资</p>
    <p>摸鱼满意度：{{ satisfaction * 100 }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companyName: "摸鱼科技有限公司",
      bonus: 6,
      satisfaction: 0.99
    };
  }
};
</script>

页面上会动态显示：
公司名称：摸鱼科技有限公司
年终奖：6个月工资
摸鱼满意度：99%

2.2 实战：开发“奶茶价格计算器”

咱们写个算奶茶价的案例，理解响应式更新：

<template>
  <div class="bubble-tea-calculator">
    <h3>🧋 奶茶续命计算器</h3>
    <label>单价：{{ price }}元/杯 </label>
    <input type="range" v-model.number="price" min="15" max="30">
    
    <label>数量：{{ count }}杯 </label>
    <button @click="count--">➖</button>
    <button @click="count++">➕</button>
    
    <p>💰 总价：{{ price * count }}元（平均每天{{ (price * count / 30).toFixed(2) }}元）</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 20,
      count: 1
    };
  }
};
</script>

拖动滑块或点击按钮时，总价和日均消费会实时计算——Vue自动帮你更新DOM，无需手动操作！

⚠️ 避坑指南：Mustache里不能写流程控制语句（如if/for），但可用三元表达式。例如{{ isVIP ? '尊贵会员' : '普通用户' }}。

三、v-text & v-html：当插值穿上“隐身衣”和“变形甲”

3.1 v-text：低调的文本卫士

v-text相当于Mustache的替身，但更隐蔽——它会整个替换元素内容：

<template>
  <div>
    <p v-text="message"></p>
    <!-- 等价于 <p>{{ message }}</p> -->
  </div>
</template>

但若元素内部有默认内容，v-text会无情覆盖：

<span v-text="newText">这段文字会被干掉</span>
<!-- 如果newText为"新文本"，则最终显示"新文本" -->

3.2 v-html：危险的富文本“魔术师”

如果需要渲染HTML标签，Mustache会原样输出<strong>加粗</strong>，而v-html能真正解析标签：

<template>
  <div>
    <p>普通插值：{{ richText }}</p>
    <p>v-html渲染：<span v-html="richText"></span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      richText: '<span style="color: red">红色加粗文本</span>'
    };
  }
};
</script>

效果对比：

第一行显示原始字符串：<span style="color: red">红色加粗文本</span>
第二行显示红色文字：红色加粗文本

3.3 安全警告：v-html是“糖衣炮弹”

直接渲染用户输入可能引发XSS攻击！模拟场景：

<template>
  <div>
    <input v-model="userInput" placeholder="试试输入<script>alert('哈哈')</script>">
    <div v-html="userInput"></div>
  </div>
</template>

如果用户输入恶意脚本，页面可能中招！解决方案：

后端过滤敏感标签
前端使用DOMPurify等库消毒：

import DOMPurify from 'dompurify';
// ...
v-html="DOMPurify.sanitize(userInput)"

四、JavaScript表达式：在插值里“搞事情”

Vue允许在插值中写单一表达式，比如运算、三元判断、方法调用：

4.1 数学运算与逻辑判断

<template>
  <div>
    <p>随机数：{{ Math.random().toFixed(2) }}</p>
    <p>打折提醒：{{ price > 100 ? '满减可用' : '再买点吧' }}</p>
    <p>反转字符串：{{ '摸鱼'.split('').reverse().join('') }}</p>
  </div>
</template>

4.2 调用方法处理数据

更复杂的逻辑建议使用计算属性或方法：

<template>
  <div>
    <p>加密邮箱：{{ hideEmail('moyu@example.com') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    hideEmail(email) {
      return email.replace(/(.{2}).*@/, '$1***@');
    }
  }
};
</script>

输出：mo***@example.com

🚫 禁忌：不能在表达式中声明变量或写循环，如{{ let a = 1 }}会报错！

五、特殊玩法：v-once让数据“冻龄”

如果想数据只渲染一次，后续变化不更新（比如固定时间戳），用v-once：

<template>
  <div>
    <p>动态时间：{{ new Date().toLocaleTimeString() }}</p>
    <p v-once>静态时间：{{ new Date().toLocaleTimeString() }}</p>
  </div>
</template>

第一行的时间每秒自动更新
第二行的时间永远停留在初次渲染时刻

适用场景：

展示初始化的配置信息
优化性能（减少不必要的重渲染）

六、完整示例：打造“打工人生存仪表盘”

结合所有知识点，写个综合案例：

<template>
  <div class="dashboard">
    <h1>🐟 {{ userName }}的摸鱼仪表盘 v{{ version }}</h1>
    
    <!-- Mustache显示动态数据 -->
    <div class="card">
      <p>本周工时：{{ workHours }}h（{{ workHours > 40 ? '需要摸鱼回血' : '还能卷' }}）</p>
      <p>咖啡摄入：{{ coffeeCups }}杯 ≈ {{ coffeeCups * 20 }}元</p>
    </div>
    
    <!-- v-html渲染个性化标签 -->
    <div class="card" v-html="customTitle"></div>
    
    <!-- 方法处理数据 -->
    <div class="card">
      <p>工资密文：{{ encryptSalary(salary) }}</p>
      <input v-model="todo" placeholder="新增摸鱼任务">
      <button @click="addTodo">添加</button>
      <ul>
        <li v-for="(item, index) in todos" :key="index">
          {{ index + 1 }}. {{ item }}
          <button @click="removeTodo(index)">完成</button>
        </li>
      </ul>
    </div>
    
    <!-- v-once固定初始值 -->
    <p v-once>入职时间：{{ joinDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "李大白",
      version: "1.0",
      workHours: 45,
      coffeeCups: 3,
      customTitle: '<span style="color: green">✅ 今日安全摸鱼</span>',
      salary: 18888,
      todo: '',
      todos: ["带薪上厕所", "刷技术论坛", "薅公司零食"],
      joinDate: new Date().toLocaleDateString()
    };
  },
  methods: {
    encryptSalary(salary) {
      return salary.toString().replace(/\d/g, '*');
    },
    addTodo() {
      if (this.todo) {
        this.todos.push(this.todo);
        this.todo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>