v-for的使用

1.遍历数组

语法:

• <标签 v-for='(item,index) in 数组'></标签>
• <标签 v-for="item in 数组"></标签>

注意事项:

• 第一个参数是元素,第二个参数是下标,与名字无关
• 许多时候使用只是为了得到元素,用不到下标.

实例

需求:

在数组的末尾添加一个 吴签

    <div id="app">
        <button @click="add">点我在数组的末尾添加一个吴签</button>
        <ul>
            <li v-for="(item,index) in list">{{index}}-{{item}}</li>
        </ul>
        <hr>
        <!-- <ul>
            <li v-for="item in list">{{item}}</li>
        </ul> -->
    </div>
    <script src="../../vue.js"></script>
    <script>
        
        new Vue({
            el: '#app',
            data :{
                list:['张三','李四','王五','赵六']
            },
            methods:{
                add(){
                    this.list.push('吴签')
                }
            }
        })

效果:每点击一次 数组的末尾就会添加一个吴签

2.遍历对象

语法: 

• <标签 v-for="(value,key) in 对象"></标签>
• <标签 v-for="value in 对象"></标签>

注意事项:

• 对象有多少个属性就会产生对应数量的标签
• 第一个参数是属性值,第二个参数是属性名,与名字无关,也可只写属性值

实例

需求:

    <div id="app">
        <ul>
            <li v-for="item in dmo">{{item}}</li>
            <hr>
            <li v-for="(val,key) in dmo">{{val}}---{{key}}</li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue ({
            el:'#app',
            data:{
                dmo:{
                    name:'leo',
                    sex:'male',
                    age:22
                }
            }
        })

结果:

3.遍历数字

 语法:

• <标签 v-for="num in 循环次数"></标签>

实例

需求:

遍历9次(即从1-9)

    <div id="app">
        <ul>
            <li v-for="num in 9">{{num}}</li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app'
        })

效果:

4.v-for中key的作用

作用:

• 提升v-for的渲染效率
• 提高渲染性能
• 避免数据混乱的情况出现

实例

需求:

解决下列出现的无法同时勾选的问题

    <div id="app">
        <button @click="list.splice(1,0,{name:'刘某',age:35})">添加</button>
        <ul>   
            <li v-for="item in list" :key="item.age">
                <input type="checkbox" >
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                list:[
                    {name:'张三',age:19},
                    {name:'李四',age:20},
                ]
            }
        })

结果:在添加key属性后,key绑定这个数据的唯一值,即可解决问题

效果: