v-for指令的使用
在 Vue 中，可以使用 v-for 指令绑定数据到数组来渲染一个列表。
使用 v-for 指令需要以 item in items 形式的特殊语法来实现。其中 items 是源数据数组，item是要在其上进行迭代的数组元素的别名：
示例：
例如假设有一组关于水果的数据，需要使用列表渲染页面，我们可以在 <li> 标签上绑定 v-for 指令：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="f in fruits">{{f}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
fruits:["苹果","西瓜","芒果"]
}
})
</script>
</body>
</html>
在浏览器中演示结果如下：
我们来看上面这段代码，其中"f in fruits"是使用
v-for指令的语法（语法肯定是不可以变的），然后 fruits 就是data 中定义的数组名，而 f 是数组元素迭代的别名，也就是我们自定义的名字。
我们还可以将 of 用作分隔符 in，以使其更接近 JavaScript 的迭代器语法：
<li v-for="f of fruits">{{f}}</li>
v-for迭代对象
v-for可以通过一个对象的属性来迭代数据，例如上面那样。除此之外，v-for还为当前项目的索引支持可选的第二个参数。
示例：
<body>
<div id="app">
<ul>
<li v-for="(f, index) in fruits">{{f}}的索引：{{index}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
fruits:["苹果","西瓜","芒果"]
}
})
</script>
</body>
在浏览器中预览：
v-for 迭代整数
v-for 也可以接受整数，在这种情况下，它会把模板重复对应次数。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-for="num in 5">{{num}}</p>
</div>
<script>
var app = new Vue({
el:"#app"
})
</script>
</body>
</html>
浏览器中演示效果：
v-for与v-if一起使用
当v-for 与 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这表示v-if 将分别重复运行于每个 v-for 循环中。
示例：
下面这段代码中，我们使用 v-for 指令遍历了 items 数组，然后在同一节点使用了 v-if 指令，这个 v-if 指令分别在每个 v-for 循环中运行一次，查找出满足条件的内容渲染，不满足条件的则不会渲染。
<body>
<div id="app">
<ul>
<li v-for="it in items" v-if="it!='a'">{{it}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
items:["a", "b", "c", "d", "e", "f"]
}
})
</script>
</body>
在浏览器演示效果：
注意官方文档上并不推荐我们在同一元素上使用
v-if 和 v-for。
网友评论