v-for 指令

v-for 指令可以绑定数组的数据来渲染一个项目列表

 

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue </title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app" >
      <ol>
        <li v-for="item  in items">
          {{item.text}}
        </li>
      </ol>

    </div>
<script>
       var  app=new Vue ({
         el:'#app',
         data:{
           items:[
         {text:'vue'},
         {text:'react'},
         {text:'angular'}
         ]
         }

       })

</script>
</body>
</html>

　　效果：

 

2018-03-22   23:19:33

posted @ 2018-03-22 23:20  1点  阅读(160)  评论(0)  编辑  收藏  举报