vue使用v-for渲染页面

原创已于 2022-11-09 11:59:50 修改 · 757 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-11-09 11:13:21 首次发布

本文演示了一个Vue.js应用，展示了如何使用`v-for`指令遍历数据，并根据条件动态应用CSS类。示例代码创建了一个表格，遍历`students`数组，通过`:key`属性设置每个表格行的唯一标识，同时使用`:class`结合计算属性实现偶数行背景色切换。

渲染语法：v-for = "(item,index) in items" :key = "index"

其中key最好是简单的，不建议写复杂的：items是vue的data中的数据。

<tr v-for = "(item,index) in students" :key = "index" :class="{back:index%2==0}">
    <td>{{index+1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td>{{item.sex}}</td>
</tr>

let app = new Vue({
        el: "#app",//选中渲染区域，区域内可以使用下面的data
        data: {
            students:[
                {"name":"王珊珊","age":22,"sex":"女"},
                {"name":"王盒饭","age":23,"sex":"男"},
                {"name":"戴涵涵","age":24,"sex":"女"},
                {"name":"张丹丹","age":25,"sex":"女"},
                {"name":"房多多","age":26,"sex":"女"},
                {"name":"古都都","age":27,"sex":"男"},
            ],
            hasback:"back"
        }
    })

整体代码如下，可以试运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- cdn引入vue2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        *{padding: 0px;margin: 0px;list-style: none;}
        table{border-spacing: 0px; border: 2px solid #ccc;}
        td,th{padding: 10px 15px ;border: 1px solid #ccc;}
        .back{background-color: pink;}
    </style>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <!-- 重复的dom元素-tr  数据集合-students  集合属性名字 -->
            <!-- <tr v-for = "(item,index) in students" :key = "index" :class="[index%2==0?hasback:'']"> -->
                <tr v-for = "(item,index) in students" :key = "index" :class="{back:index%2==0}">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
            </tr>
        </table>
        <!-- <div class="box">
            <li v-for = 'item in 10'>{{item}}</li>
        </div> -->
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",//选中渲染区域，区域内可以使用下面的data
        data: {
            students:[
                {"name":"王珊珊","age":22,"sex":"女"},
                {"name":"王盒饭","age":23,"sex":"男"},
                {"name":"戴涵涵","age":24,"sex":"女"},
                {"name":"张丹丹","age":25,"sex":"女"},
                {"name":"房多多","age":26,"sex":"女"},
                {"name":"古都都","age":27,"sex":"男"},
            ],
            hasback:"back"
        }
    })
</script>
</html>