Vue指令之v-for的使用

1.v-for循环普通数组

2.v-for循环对象数组

3.v-for循环对象中的属性

4.v-for循环数字

1.v-for循环普通数组

v-for="(item,i) in list"

示例：

在vue实例的data中增加一个数组

data: {
list: [1, 2, 3, 4, 5]
}

循环数据

<ul><li v-for="(item,i) in list">索引：{{i}}---每一项：{{item}}</li>
</ul>

结果

2.v-for循环对象数组

v-for="(item,i) in userList"

示例

在vue实例的data中增加一个数组

data: {
   userList: [
       {id: 1,name: "zs1",age: 21},
       {id: 2,name: "zs2",age: 22},
       {id: 3,name: "zs3",age: 23},
       {id: 4,name: "zs4",age: 24},
       {id: 5,name: "zs5",age: 25}
   ]
}

循环数组对象

<ul>
<li v-for="(item,i) in userList">索引：{{i}}---ID：{{item.id}}---姓名：{{item.name}}---年龄：{{item.age}}</li>
</ul>

结果

3.v-for循环对象中的属性

v-for="(val,key,i) in userList[0]"

示例

<div v-for="(val,key,i) in userList[0]">i: {{i}}---键：{{key}}---值：{{val}}</div>

结果

注意：
在遍历对象身上的键值对时，除了有 val key 键值对，在第三个位置还有一个索引

4.v-for循环数字

v-for=“i in 10”

示例

<p v-for="i in 10">第{{i}}个p标签</p>

结果

注意：
v-for迭代数字时，值从1开始

Vue指令之v-for的使用相关推荐

Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> &l ...
数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己在造组件轮子,也就是 ...
Vue指令练习实例-学生信息录入
很好的一个可以感受Vue.js的MVVM模型,数据和模型双向绑定的实例练习. <!doctype html> <html lang="en"> <he ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...

Vue指令之v-for的使用

1.v-for循环普通数组

2.v-for循环对象数组

3.v-for循环对象中的属性

4.v-for循环数字

Vue指令之v-for的使用相关推荐

最新文章

热门文章