vue模板中只允许简单无副作用的javascript表达式，复杂逻辑须移至computed或methods；禁止语句、赋值、内联函数及非纯函数调用，html渲染需用v-html且仅限可信数据。
在 Vue 模板中写表达式，核心原则是：只放能“一眼看懂、一次求值、无副作用”的简单表达式。复杂逻辑必须移出模板，交给 computed 或 methods 处理。
只允许单个表达式，禁止语句和赋值
插值 {{ }} 和绑定指令（如 :class）里只能写 JavaScript 表达式，不能写语句。判断标准是：它是否可以合法地放在 return 后面。
- ✅ 可以：
{{ count + 1 }}、{{ user?.name || '游客' }}、{{ isActive ? '在线' : '离线' }}、:class="'btn-' + size + (isActive ? ' active' : '')" - ❌ 不行：
{{ if (x) { ... } }}、{{ let a = 1 }}、{{ for (let i=0; i、<code>{{ this.doSomething() }}（除非纯函数且无响应式副作用）
复杂格式化或组合逻辑，一律抽到 computed
哪怕语法上合法，像 {{ firstName.trim().toUpperCase() + ' ' + lastName.split(' ')[0] }} 这类写法也应避免——它不可复用、难调试、每次渲染都重复执行。
- 把多字段拼接、权限判断、状态映射等逻辑封装进
computed，例如：computed: { fullName() { return `${this.firstName.trim()} ${this.lastName.split(' ')[0]}` } } - 模板中只留干净调用：
{{ fullName }}或v-if="canEdit" - 计算属性自动缓存，依赖不变时不会重新计算，性能更优
需要动态行为时，优先用 methods 而非内联函数
事件处理推荐绑定 methods 中定义的方法，而不是在模板里写箭头函数或语句。
- ✅ 推荐：
@click="handleDelete(item.id)"，方法在methods中定义 - ❌ 避免：
@click="() => deleteItem(item.id)"（每次渲染新建函数，影响 diff 和子组件复用） - ❌ 禁止：
@click="count++"或@click="fetchData(); saveLog()"（内联语句无法测试、破坏响应式追踪）
注意 HTML 渲染与文本输出的区别
{{ }} 默认转义内容，防止 XSS；若真需渲染 HTML，必须显式使用 v-html，且只用于可信数据。
- 显示富文本标题：
<div v-html="article.titleHtml"></div> - 普通文本展示仍用插值：
<div>{{ article.titleText }}</div> - 切勿混用：
{{ '<b>危险</b>' }}只会显示字符串，不是加粗效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
