v-for 指令的四种使用方式 | 学习笔记

简介: 快速学习 v-for 指令的四种使用方式

开发者学堂课程【Vue.js 入门与实战v-for指令的四种使用方式】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8139


v-for指令的四种使用方式


目录

一、v-for属性

二、四种使用方式代码

 

一、v-for属性:

1.迭代数组

<ul>

<li v-for="(item,i) in list">索引:{{i}}---姓名: {{item.name}} ---年龄:{{itm.age}}</li>

</ul>

2.迭代对象中的属性

<!--循环遍历对象身上的属性-->

<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

3.迭代数字

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


二、四种使用方式代码

1. v-for 循环普通数组:

<head>

<meta charset="UPr-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src=" . /lib/vue-2.4.0.js"></script>

</head>

<body>

<div id=”app”>

<!--<p>{{list[0]}}</p>

<p>{{list[1]}}</p>

<p>{{list[2]}}</p>

<p>{{list[3]}}</p>

<p>{{list[4]}}</p>-->

<p v-for=”(item, i) in list”>索引值:{{i}}---每一项:{{item}}</p>

</div>

<script>

//创建vue 实例,得到ViewMode1

var vm= new vue ({

el: ‘#app’,

data: {

list: [1,2,3,4,5,6]

},

methods: {}

});

</script>

</body>

2. v-for 循环对象数组:

<head>

<meta charset="UPr-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src=" . /lib/vue-2.4.0.js"></script>

</head>

<body>

<div id=”app”>

<p v-for=”user in list”>Id:{{user.id}}---名字:{{user.name}}---索引:{{i}}</p>

</div>

<script>

//创建vue 实例,得到ViewMode1

var vm= new vue ({

el: ‘#app’,

data: {

list:[

{id:1, name: ‘zs1’},

{id:2, name: ‘zs2’},

{id:3, name: ‘zs3’},

{id:4, name: ‘zs4’}

]

},

methods: {}

});

</script>

</body>

3. v-for 循环对象:

<head>

<meta charset="UPr-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src=" . /lib/vue-2.4.0.js"></script>

</head>

<body>

<div id=”app”>

<!--注意:在遍历对象身上的键值对的时候,除了 有val key,在第三个位置还有 一个 索引-->

<p v-for=”(val, key, i) in user”>值是:{{val}}---键是:{{key}}---索引:{{i}}</p>

</div>

<script>

//创建vue 实例,得到ViewMode1

var vm= new vue ({

el: ‘#app’,

data: {

user:{

id:I,

name:’托尼.屎大颗’,

gender:’男’

}

},

methods: {}

});

</script>

</body>

4. v-for 迭代数字:

<head>

<meta charset="UPr-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src=" . /lib/vue-2.4.0.js"></script>

</head>

<body>

<div id=”app”>

<!--in 后面我们放过 普通数组,对象数组,对象,还可以放数字-->

<!--注意:如果使用v-for迭代数字,那么前面的count值从11开始-->

<p v-for=”count in 10”>这是第{{count}}次循环</p>

</div>

<script>

//创建vue 实例,得到ViewMode1

var vm= new vue ({

el: ‘#app’,

data: {},

methods: {}

 });

</script>

</body>


相关文章
|
存储 Shell 开发者
E906的指令|学习笔记
快速学习 E906的指令
536 0
|
1月前
CPU的工作原理基于其内部结构,通过执行指令来完成各种任务
CPU的工作原理基于其内部结构,通过执行指令来完成各种任务
49 2
|
2月前
|
Shell Linux Windows
帮助指令 man ,help及文档常用管理指令
这篇文章介绍了Linux系统中常用的帮助指令`man`和`help`,以及文件目录操作、文本处理、命令历史查看等基础管理指令的使用方法。
帮助指令 man ,help及文档常用管理指令
|
6月前
|
IDE 编译器 C语言
【C++】使用g++指令控制【翻译】各个过程
【C++】使用g++指令控制【翻译】各个过程
|
6月前
指令模式
指令模式。
23 1
|
Linux Shell
4.2.2 基础指令的操作
4.2.2 基础指令的操作
94 0
|
Kubernetes API 容器
2022-10-13-k8s的操作指令
2022-10-13-k8s的操作指令
97 0
|
JavaScript 前端开发
vvue基础指令和基础属性
vue基础指令和基础属性
西门子S7-1200移动指令编程实例,移动和块移动指令、填充指令、交换 指令的作用是什么?
西门子S7-1200的移动指令包括移动和块移动指令、填充指令、交换指令。
西门子S7-1200移动指令编程实例,移动和块移动指令、填充指令、交换 指令的作用是什么?
|
JavaScript 前端开发
3、指令(v-if与v-for的区别、各种指令的使用)
3、指令(v-if与v-for的区别、各种指令的使用)
148 0
3、指令(v-if与v-for的区别、各种指令的使用)