提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

V-for的使用

变量 数组
2023-04-18 16:11:08 时间

目录

v-for遍历数组和对象

1. v-for遍历普通数组

2.v-for遍历对象数组

3.v-for遍历对象

1. v-for遍历普通数组

语法 : v-for="(item,index) in array"

item : 数组中的每一项

index : 索引值

如果只需要第一个参数item ,index可以不写,括号可以省略

<body>
<div id="app">
    <ul>
<!--        in前边只写一个变量,变量中保存的是数据-->
<!--        <li style="color:red"  v-for="item in array">{{item}}</li>-->
        <!--        in前边写2个变量,第一个变量中保存的是数据,第二个变量中保存的是下标-->
        <li style="color:red"  v-for="(item,index) in array">{{item}} -- {{index}}</li>
    </ul>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            array:['吃饭','睡觉','敲代码']
        }
    })
</script>
</body>

2.v-for遍历对象数组

语法 : v-for="(item,index) in array"

item : 数组中的每一项(每一个对象)

index : 索引值

如果只需要第一个参数item ,index可以不写,括号可以省略

<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in array">
            <td><input type="checkbox"></td>
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            array:[
                {
                    name:'小红',
                    age:21,
                    sex:'女'
                },
                {
                    name:'小黄',
                    age:21,
                    sex:'男'
                },
                {
                    name:'小蓝',
                    age:21,
                    sex:'男'
                }
            ]
        }
    })
</script>
</body>

3.v-for遍历对象

语法 : v-for="(value,key,index) in obj"

value: 属性值

key : 属性

index : 索引值

如果只需要第一个参数value,那么key 和index可以不写,括号可以省略

<body>
<div id="app">
    <ul>
        <!--        in前边只写一个变量,变量中保存的是属性值-->
<!--        <li v-for="o1 in obj">{{o1}}</li>-->
<!--                in前边写2个变量,第一个变量中保存的是属性值,第二个变量中保存的是属性名-->
<!--        <li v-for="(o1,o2) in obj">{{o1}}&#45;&#45;{{o2}}</li>-->
        <!--                in前边写2个变量,第一个变量中保存的是属性值,第二个变量中保存的是属性名,第三个变量中保存的是下标-->
        <li v-for="(o1,o2,o3) in obj">{{o1}}--{{o2}}--{{o3}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            obj:
                {
                    name:'小红',
                    age:21,
                    sex:'女'
                }
        }
    })
</script>
</body>

注意 : 永远不要把v-if 和 v-for 同时用在一个元素上,因为v-for的优先级高于v-if,当v-if去判断条件时,v-for已经遍历结束

详情参考官网 : 风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81

如果,我们确实需要判断条件再渲染,那么,可以先把数据处理好,再遍历处理好的数据(计算属性,以后讲解),或者在遍历元素的父元素上进行判断

下面,我们用第二种方法实现数据的判断与渲染

<body>
<div id="app">
    <h1>人员信息表</h1>
    <table border="1px solid #333" >
        <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody v-if="bool">
        <tr v-for="(item,index) in obj.result">
            <td><input type="checkbox"></td>
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            bool:'obj.code===200',
            obj:{
                code: 200,
                message: '响应成功',
                result: [
                    {
                        name: '小红',
                        age: 21,
                        sex: '女'
                    },
                    {
                        name: '小黄',
                        age: 21,
                        sex: '男'
                    },
                    {
                        name: '小蓝',
                        age: 21,
                        sex: '男'
                    }
                ]
            }

        }
    })
</script>
</body>

相关文章