v-if 和 v-for 的使用-优快云博客

本文详细介绍了Vue.js中v-if和v-for指令的使用方法，包括如何根据数据动态显示内容，以及如何遍历数组和对象，展示了Vue的响应式更新机制和列表渲染技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. v-if 的使用：假如后端传过来的数据，1 表示 “已完成”， 0表示 “未完成”，那么如何根据 1、0显示出对应的表示信息呢？

<p><span v-if="data.isFinished === 0">未完成</span><span v-if="data.isFinished === 1">已完成</span></p>

2. v-for 的使用：用 v-for 指令将一个数组对应一组元素 https://cn.vuejs.org/v2/guide/list.html

v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
v-for 还支持一个可选的第二个参数为当前项的索引。
也可以用 v-for 通过一个对象的属性来迭代。（像一个字典，对它的 value、key、index进行遍历）
如果不写 v-bind：key 的话，会报错： “ Elements in iteration expect to have 'v-bind:key' directives”
解决办法有两个： 1. 添加 v-bind:key="index" 2. 在build处关闭eslint检测

//html
<span v-for="(line, index) in data.lines" v-bind:key="index">{{ line }}  </span>

//data
"lines": [
  "line4"
]

转载于:https://www.cnblogs.com/mlllily/p/10791784.html