xinggevip

Vue2.x_1.8指令v-for和template列表属性标签
app.jsnew Vue({ el:"#vue-app", data:{ ...
扫描右侧二维码阅读全文
18
2019/05

Vue2.x_1.8指令v-for和template列表属性标签

app.js

new Vue({
    el:"#vue-app",
    data:{
        nums:["1","2","3","4","5"],
        users:[
            {name:"tom",age:20},
            {name:"jak",age:14},
            {name:"tony",age:18},
            {name:"marry",age:32},
            {name:"kuke",age:999},
        ]
    }
})

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app">
        <h1>v-for读取数组中的数据</h1>
        <ul>
            <li v-for="num in nums">
                {{num}}
            </li>
        </ul>

        <ul>
            <li v-for="(user,index) in users">  <!--第一个参数为对象,第二个参数为对象的下标,第三个参数为数组名称-->
                {{index+1}}.{{user.name}} - {{user.age}}
            </li>
        </ul>

        <div>
            <template v-for="(user,index) in users"><!--不仅可以应用在ui>li中-->
                <h3>{{index+1}}.{{user.name}}</h3>
                <p>Age = {{user.age}}</p>
            </template>
            <hr>
            <template v-for="(user,index) in users"><!--在不知道对象属性的情况下,遍历出对象的属性和属性值-->
                <div v-for="(val,key) in user">
                    <p>{{key}} -- {{val}}</p>

                </div>
                <hr>
            </template>

        </div>



    </div>
    <script src="app.js"></script>
</body>
</html>

效果演示

http://hao.qiangssvip.com/vuestudy/Lesson08

Last modification:May 21st, 2019 at 09:22 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment