Vue.js学习笔记03

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

1.1 使用v-for循环普通数组

<div id="app">
    <p v-for="(item,i) in list">{{i}}----{{item}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list:[1,2,3,4,5]
        },
        methods:{}
    });
</script>

1.2 使用v-for循环对象数组

<div id="app">
    <p v-for="user in list">{{user.id}}-----{{user.name}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list:[
                {id:1,name:'张三'},
                {id:2,name:'李四'},
                {id:3,name:'王五'}
            ]
        },
        methods:{}
    });
</script>

1.3 使用v-for循环对象

<div id="app">
    <p v-for="(value,key) in user">值：{{value}}---键：{{key}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            user:{
                id:1,
                name:'托尼，史塔克',
                gender:'男'
            }
        },
        methods:{}
    });
</script>

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

1.4 使用v-for迭代数字

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

注：如果使用v-for迭代数字，序号从1开始。

2. v-for中key的使用

2.2.0+的版本中，当在组件中使用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">
       <input type="checkbox">{{item.id}}--{{item.name}}
   </p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id:'',
            name:'',
            list:[
                {id:1,name:'李斯'},
                {id:2,name:'嬴政'},
                {id:3,name:'赵高'},
                {id:4,name:'韩非'},
                {id:5,name:'荀子'}
            ]
        },
        methods:{
            add(){  //添加元素到对象数组
                this.list.push({id:this.id,name:this.name})
            }
        }
    });
</script>

但是如果在对象数组前面添加元素，并选中最后一个元素，就会出现下面这种情况。

methods:{
    add(){  //添加元素到对象数组
        this.list.unshift({id:this.id,name:this.name})
    }
}

注意：使用v-for循环的时候，key属性只能使用数字或字符串，key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。

<p v-for="item in list" :key="item.id">
	<input type="checkbox">{{item.id}}--{{item.name}}
</p>

3. v-if和v-show的使用和特点

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
</div>

3.1 v-if的特点

• 每次都会重新删除或创建元素。
• 有较高的切换性能消耗。

3.2 v-show的特点

• 每次不会重新进行DOM元素的删除和创建操作，只是切换了元素的display:none样式。
• 有较高的初始渲染消耗。

3.3 注意事项

• 如果元素涉及到频繁的切换，最好不要使用v-if。
• 如果元素可能永远也不会被显示出来，则推荐v-if。