2018-09-11 vue指令

内容 :v-for 循环

<body>
<div id="two">
<ul>




   <li v-for="(v,i) in arrs">
       {{v.num}}
       {{v.name}}
       {{v.price}}
   </li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#two',
        data:{

// arr:[1,2,3], //数组
// obj:{name:'jack',age:12} //对象
arrs:[{
num:'1',
name:'apple',
price:'3'
}]
}
})

</script>

</body>

内容 :表格
<body>
<div id="three">

    <table border="1" cellspacing="0" width="300">
       <thead>
           <th>编号</th>
           <th>名称</th>
           <th>价格</th>
       </thead>
        <tr v-for="(v,i) in furit">
            <td>{{index+1}}</td>
            <td>{{v.name}}</td>
            <td>{{v.price}}</td>
        </tr>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#three'
        , data: {
            furit: [{
                    name: 'apple',
                    price: '3'
            },
                {
                     name: 'orage',
                    price: '5'
        }
                 ]
        }
    })
</script>

</body>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,505评论 0 13
  • Scala与Java的关系 Scala与Java的关系是非常紧密的!! 因为Scala是基于Java虚拟机,也就是...
    灯火gg阅读 3,489评论 1 24
  • 毛玠字孝先,是陈留平丘人,年轻时就担任了当地是县吏,并以公正廉洁著称于世。后来为了躲避战乱,想要到荆州投奔刘表,但...
    Mr龙冥阅读 980评论 0 0
  • 随着教育教学改革的不断深入推进,家庭教育对孩子的影响之大表现的也越来越明显,在国家新制定的《教育规划纲要》中也明确...
    秋昵阅读 1,872评论 0 0
  • 早上5点20分起来了一趟,打算看看海上日出,结果云太厚,而且好像云后面的太阳已经早就爬上来,所以看日出失败,继续睡...
    一如故我阅读 200评论 0 0