v-for

最新推荐文章于 2024-01-04 14:57:05 发布

zmj2051176726

最新推荐文章于 2024-01-04 14:57:05 发布

阅读量417

点赞数

分类专栏： vue指令

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/100099975

版权

vue指令专栏收录该内容

8 篇文章 0 订阅

订阅专栏

v-for

基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是Array|Object|Number|String。
该指令之前，必须使用特定的语法(item，index) in items，为当前遍历元素提供别名，v-for的优先级别高于v-if之类的其他指令。
另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>

例一：

<body>
<div id="app">
    <!--数组-->
    <li v-for="item in items">
        {{item}}
    </li>

    <!--对象-->
    <div v-for="(p,index) in person">
        {{index+"："+p}}
    </div>

    <!--字符串-->
    <p v-for="s in str">
        {{s}}
    </p>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            items:["南瓜","冬瓜","西瓜"],
            person:{name:"张三",sex:"男"},
            str:"abc"
        }
    })
</script>

结果如下：
在这里插入图片描述
v-for小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for练习</title>
    <script src="../../js/vue.js"></script>
</head>
<style>
    table{
        border:2px solid;
        width:600px;
        text-align: center;
    }
    thead{
        background: orangered;
    }
</style>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="p in persons">
            <td>{{p.name}}</td>
            <td>{{p.sex}}</td>
            <td>{{p.age}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            persons:[
                {name:"张三",sex:"男",age:17},
                {name:"李四",sex:"女",age:24},
                {name:"王二麻",sex:"男",age:23},
                {name:"王大",sex:"女",age:12}
            ]
        }
    })
</script>
</html>

运行结果：
在这里插入图片描述

zmj2051176726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for

v-for基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是Array|Object|Number|String。该指令之前，必须使用特定的语法(item，index) in items，为当前遍历元素提供别名，v-for的优先级别高于v-if之类的其他指令。另外也可以为数组索引指定别名 (或者用于对象的键)：<div v-for="(item, index) in item...
复制链接

扫一扫