Vue基础教程--循环分支指令（二）
1 v-for循环四种方式
1.1 v-for循环普通数组
<div id="app">
<p>{
{list[0]}}</p>
<p>{
{list[1]}}</p>
<p>{
{list[2]}}</p>
<p>{
{list[3]}}</p>
<!--索引可选可不选-->
<!-- <p v-for="item in list">{
{item}}</p> -->
<p v-for="(item, i) in list">索引值：{
{i}} --- 每一项：{
{item}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4]
},
methods: {
}
});
</script>
效果展示
1.2 v-for循环对象数组
<style>
table#a{
border-collapse:collapse;
}
#a td
{
border:1px solid black;}
#a th
{
border:1px solid black;}
</style>
<body>
<div id="app">
<table id="a" >
<tr>
<th>索引</th>
<th>名称</th>
<th>位置</th>
</tr>
<tr v-for="(hero, i) in list">
<td>{
{i}}</td>
<td>{
{hero.name}}</td>
<td>{
{hero.type}}</td>
</tr>
</table>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{
name: '小炮', type: 'AD'},
{
name: '万豪', type: '打野'},
{
name: '机器人', type: '辅助'},
{
name: '火男', type: 'AP'},
{
name: '盖伦', type: '上单'}
]
},
methods: {
}
});
</script>
</body>
效果展示
1.3 v-for循环对象
<div id="app">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in hero">{
{i}} {
{key}} : {
{val}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
hero: {
name: '复仇焰魂',
gender: '男',
address: '符文之地'
}
}
})
</script>
效果展示
1.4 v-for迭代数字
<div id="app">
<!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<p v-for="count in 4">这是第 {
{ count }} 次循环</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
效果展示
1.5 v-for循环中key属性的使用
- v-for 循环的时候，key 属性只能使用 number获取string
- key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定唯一的字符串/数字类型 :key 值
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<p v-for="item in list" :key="item.id">
<input type="checkbox">{
{item.id}} --- {
{item.name}}
</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{
id: 1, name: '李斯'},
{
id: 2, name: '嬴政'},
{
id: 3, name: '赵高'}
]
},
methods: {
add() {
// 添加方法
this.list.unshift({
id: this.id, name: this.name})
}
}
});
</script>
效果展示
第一幅图循环是通过
，第二幅图循环是通过
从效果展示可以看出都是勾选嬴政的情况下，存在 :key="item.id"时，添加新的对象成功后勾选不会错位，仍然勾选的是嬴政，而不存在 :key="item.id"时，添加新的对象成功后勾选出现了问题，勾选了李斯，这就是v-for循环中key属性的作用。
2 v-if和v-show的使用
- v-if 的特点：每次都会重新删除或创建元素
- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
- v-if 有较高的切换性能消耗
- v-show 有较高的初始渲染消耗
- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
<div id="app" align="right">
<input type="button" :value="flag ? '隐藏': '显示'" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true
}
});
</script>
效果展示
从效果展示可以看出v-if和v-show都实现了元素的隐藏和显示，但是从源代码可以看出v-if是通过删除或创建元素实现的，v-show是通过style="display: none;"实现的。
上一章：Vue基础教程–基本指令(一)
下一章：Vue基础教程–过滤器(三)