当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > vue >内容正文

vue

vue v-凯发ag旗舰厅登录网址下载

发布时间：2025/1/21 vue 16 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了 vue v-for指令小编觉得挺不错的,现在分享给大家,帮大家做个参考.

v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值

基本使用

<li v-for="item in arr">{{item}} li>var vue = new vue({el: "#app",data: {arr: ['苹果','橘子','香蕉','草莓']} })

item是arr数组的每一项枚举值

v-for还有index和key属性

<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}li>

item指的是被遍历的数组（对象）的每一个值，item的命名不是规定的，可以自定义命名
index指的是每一项被遍历的值的下标索引值
key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新

v-for还可以用来遍历对象

var vue = new vue({el: "#app",data: {obj:{name: '小明',age: '17岁',height: '175cm',sex: '男',hobby: '打篮球'}} })<li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}li>

和数组内容不同的是index此时代表的是对象的key
正确的表示方法

<li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}li>

上面的v-for一共有三个参数
item表示对象的内容，
key表示的是对象key键值名称
index表示的是当前obj的下标索引值

实际工作中我们使用v-for遍历json更多一点

var vue = new vue({el: "#app",data: {arr: [{name:'小明',age: '17',sex:'男',height: '168'},{name:'小红',age: '18',sex:'女',height: '165'},{name:'小周',age: '19',sex:'男',height: '178'},{name:'小刚',age: '20',sex:'男',height: '167'}]} })<table><tr><th>姓名th><th>年龄th><th>性别th><th>身高th>tr><tr v-for="(item,index) in arr"><td>{{item.name}}td><td>{{item.age}}td><td>{{item.sex}}td><td>{{item.height}}td>tr> table>

v-for是可以进行嵌套的

<body><div id="app"><table><tr v-for="i in number" :key="i"><td v-for="j in i" :key="j">{{i}}x{{j}}={{i*j}}td>tr>table>div><script src = "js/vue.js">script><script>var vue = new vue({el: "#app",data: {number:[1,2,3,4,5,6,7,8,9]}})script> body>

使用 v-for需要注意的情况
1)v-for遍历的出来的不是数据，而是元素
2)如果使用item和index的时候一定要使用括号包裹起来

(item,index) in arr

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的vue v-for指令的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

vue
指令