美文网首页
2018-09-11

2018-09-11

作者: 笨小妞_9ed3 | 来源:发表于2018-09-11 19:32 被阅读0次

    v-for循环

     <div id="qx">
                <ul>
                    <li v-for="v in arr">{{v}}</li>
                    <li v-for="v in obj">{{v}}</li>
                    <!--下标-->
                    <li v-for="(val,ind) in arr">{{ind}}--{{val}}</li>  
                    
                    <li v-for="(value,ind) in arrs">
                        {{value.num}}
                        {{value.name}}
                        {{value.price}}
                    </li>
                </ul>
            </div>
            <script>
                new Vue({//vue实例
                    el:"#qx",//element选择器
                    data:{
                        arr:[1,2,3],
                        obj:{name:"qianxi",age:18},
                        arrs:[{
                            num:1,
                            name:"apple",
                            price:2,
                        },
                        {
                            num:2,
                            name:"banana",
                            price:4,
                        },
                        {
                            num:3,
                            name:"orange",
                            price:6,
                        }]
                    }
                })
            </script>
    
    ##表格
    
    <div id="qx">
                    <table border="1" cellspacing="0">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>名称</th>
                                <th>价格</th>         
                            </tr>
                        </thead>    
                        <tbody>
                            <tr v-for="(val,index) in arrs">
                                <td>{{index+1 }}</td>
                                <td>{{val.name}}</td>
                                <td>{{val.price}}</td>
                                
                            </tr>
                        </tbody>
                    </table>
            </div>       
                <script>
                new Vue({
                    el:"#qx",
                    data:{
                        arr:[1,2,3],
                        arrs:[{
                            name:"apple",
                            price:2,
                        },
                        {
                            name:"banana",
                            price:4,
                        },
                        {
                            name:"orange",
                            price:6,
                        }]
                    }
                })
            </script>
        ```

    相关文章

      网友评论

          本文标题:2018-09-11

          本文链接:https://www.haomeiwen.com/subject/lffpgftx.html