开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-vue 指令-循环指令】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11309
前端技术-vue指令-循环指令
内容介绍
一、v-for 基本表达
二、遍历数据列表
三、总结
一、v-for 基本表达
1.代码
<!-- 1、简单的列表渲染 –->
<u1>
<li v-for=”n in 10”>{ {b} } </li>
</ul>
<ul>
<!—如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 –->
<li v-for=”(n,index) in 5”> { { n} } – { {index} }</li>
</ul>
（1） 介绍
<li v-for=”n in 10”> 中的 in 是固定的，写到中间，10表示要循环十次。每次循环完之后，循环值都赋给 n。{ { n} }能把循环的值依次输出。Index 表示每次索引值/下标值。
（2） 演示
创建并输入基本代码。
<body>
<div id=”app”>
<ul>
<li v-for=”n in 10”>{{n}}</li>
</ul>
其中，<ul>
<li></li>
</ul>
表示列表标签。用 v-for 执行循环遍历。效果如下：
换用 <ol> 标签：
<ol>
<li v-for=”(n,index) in 10”> {{n}} –{{index}} </li>
</ol>
其中，n为每次遍历后的值，index 是每次的索引值。
效果如下：
二、遍历数据列表
1、示例
data:{
userList: {
{ id: 1,username:’helen’,age:18},
{ id: 2,username:’peter’,age:28},
{ id: 3,username:’andy’,age:38}
]
}
js 中有两种处理格式，一个是对象一个是数组。以上格式为数组格式，格式里有多个对象。
2、演示
<hr/>
<table>
<tr v-for=”user in userList”>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src=”vue.min.js”> </script>
<script>
new Vue({
el:’#app’,
data:{
userList: [
{ id: 1,username:’helen’,age:18},
{ id: 2,username:’peter’,age:28},
{ id: 3,username:’andy’,age:38}
]
效果如下：
其中，</hr> 为了遍历明显,即为效果显示时底部的水平线。
可以为数据添加表格：
<hr/>
<table border=“1”>
三、总结
1、v-bind 单向绑定
表示在属性里可以取到 data 中的值。写法为 v-bind： 加上名称，简写形式：冒号（：）
2、v-model 双向绑定
使用 v-model 进行双向数据绑定，数据对应发生变化。
3、事件
在 vue 里加 methods 定义方法，用 v-on 绑定事件，简写形式：@--。
4、修饰符
加 prevent 阻止原本行为而去执行给定方法。
5、v-if 条件渲染
用 v-if 做判断。
6、v-for 列表渲染
v-for 做循环遍历。可直接循环或对数组进行循环。
在Vue中通过指定完成书写。
重点内容为 v-model 双向绑定、事件、v-if、v-for
