你的位置:首页 > 软件开发 > Java > Vue列表渲染

Vue列表渲染

发布时间:2016-09-05 15:00:08
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组<!DOCTYPE html><html> <head> <meta c ...

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09

 

一 for循环数组

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Vue列表</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src='/images/loading.gif' data-original="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <ul class="test">      <li v-for="item in name"> <!--获取位置第一种写法:$index是vue自带的位置索引-->        {{$index}}--{{item.message}}    <!--输出0--Foo  1--Bar-->      </li>      <li v-for="(index,item) in name"> <!--获取位置第二种写法:自定义一个index变量直接跟着item-->        {{index}}**{{item.message}}          <!--输出0**Foo  1**Bar-->      </li>    </ul>    <script type="text/javascript">      var myVue = new Vue({        el: ".test",        data: {          name: [  //注意name是数组         { message: 'Foo' },         { message: 'Bar' }        ]        }      })    </script>  </body></html>

原标题:Vue列表渲染

关键词:VUE

VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。