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"><!-- JOSN中的姓名 --><td>{{item.name}}</td><!-- JOSN中的年龄 --><td>{{item.age}}</td><!-- JOSN中的性别 --><td>{{item.sex}}</td><!-- JOSN中的身高 --><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

vue v-for指令相关推荐

Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
vue实例、指令、生命周期
vue实例.指令.生命周期本章重点 1.生命周期 2.插值 3.指令一.创建一个实例vue实例每一个vue应用都是通过vue函数创建一个新的vue实例开始的语法: ver vm = new V ...
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...
01 vue 基础（指令）
vue官网 https://cn.vuejs.org/ 一.什么是 MVVM M - model 数据 (提供) V - view 界面 / 模板(提供) VM - viewModel 连接模板和数据 ...
【Vue基本指令】一.什么是Vue；二.Vue开发的方式；三.Vue的基本指令（重点）
目录一.什么是Vue 1.前端技术的发展(html.CSS.JavaScript) (1)JQuery:是对JavaScript进行了封装,使得操作DOM.事件处理.动画处理.Ajax交互变得非常简 ...
03、Vue.js---自定义指令
2019独角兽企业重金招聘Python工程师标准>>> 自定义指令的简介(官网):除了核心功能默认内置的指令,Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象 ...
Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
vue中v-model指令的使用之Vue知识点归纳(九)
本文中描述 vue 中 v-model 指令的基本使用 1 简述 vue 中 v-model 用来获取和设置表单中的值 2 案例 <!DOCTYPE html> <html lan ...
vue中v-bind指令的使用之Vue知识点归纳(七)
本文中描述 vue 中 v-bind 指令的基本使用 1 简述 vue 中 v-bind 用来操作 html 元素标签中的属性 2 案例 <!DOCTYPE html> <html ...
vue中v-if指令的使用之Vue知识点归纳(六)
本文章描述 vue 中 v-if 的基本使用 vue 中 v-show 与 v-if 的区别 1 简述 vue 中 v-if 指令,顾名思义是用来进行条件判断的,直接操作 dom 2 案例 <! ...

vue v-for指令

vue v-for指令相关推荐

最新文章

热门文章