vue列表渲染

作者: liluchang 分类: vue 发布时间: 2019-03-11 23:29

vue列表循环的时候,在单个循环的元素内部,加上v-for=”单数 in 复数”,具体代码看下面

//html code
<div class="container" id="app">
    <ul class="list-group">
        <li class="list-group-item" v-for="step in steps">@{{ step.name }}</li>
    </ul>
</div>
//js代码
<script>
    new Vue({
        el:'#app',
        data:{
            steps:[
                {name:'hello world',completion:false},
                {name:'hello liluchang',completion:false}
            ]
        }
    });
</script>

这个v-for=”(单数,key,index) in 复数”,其中key和index为可选参数,如果没有,就不用括号。一般操作这个数据的时候,会使用index,注意:index为默认写法。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

标签云