模板中的行为表达

模板中的行为表达

Vue 指令让模板可以直接表达条件、循环、属性绑定和事件监听。

适用场景

• 条件展示
• 列表渲染
• 动态样式
• 事件处理

技术点总览

分批介绍

v-if 和 v-show

v-if 会创建销毁节点，v-show 只是切换 display。

1<p v-if="isLogin">欢迎回来</p>
2<p v-show="visible">这段内容只是隐藏</p>

v-for 列表渲染

v-for 渲染列表时要提供稳定 key。

1<li v-for="item in list" :key="item.id">
2  {{ item.title }}
3</li>

v-bind 和 v-on

v-bind 动态绑定属性，v-on 监听事件。

1<button :class="{ active: selected }" @click="select">
2  选择
3</button>

使用建议

• 先把数据来源、状态归属和交互入口写清楚，再考虑抽象。
• 示例代码只保留核心写法，真实业务里还要补充 loading、error、empty 等状态。
• 如果一种写法让代码更绕，优先回到更直观、更容易维护的实现方式。

小结

模板中的行为表达 的重点不是记住某个 API，而是理解它解决的问题、适合的场景以及和其它技术点之间的关系。把每个小知识点拆开看，再组合到真实业务里，代码会更有规律，也更容易维护。