2.v-for 数据遍历

v-for指令的使用

 

> ## vue 2.0 v-for 指令使用
>
> <!DOCTYPE html>
> <html>
>     <head>
>         <meta charset="UTF-8">
>         <title></title>
>         <style type="text/css">
>             a{display: block;}
>         </style>
>     </head>
>     <body>
>         <div id="for5">
>             <a v-for="(item,index) in items" v-on:click="onclick(index)" href="javascript:void(0)">{{ index }}{{ item.text }}</a>
>         </div>
>         <input type="text" name="" id="index" value=""/>
>     <script src="js/vue2.js" type="text/javascript" charset="utf-8"></script>
>     <script type="text/javascript">
>         new Vue({
>             el: '#for5',
>             data: {
>                 items: [
>                     { text: '巴士' },
>                     { text: '快车' },
>                     { text: '专车' },
>                     { text: '顺风车' },
>                     { text: '出租车' },
>                     { text: '代驾' }
>                 ]
>             },
>             methods: {
>                 onclick:function(index){
>                     console.log(index);
>                     document.getElementById('index').value = index;
> //                  window.location.href = "http://www.baidu.com";
>                     window.location.href = "#";
>                 }
>             }
>         })
>     </script>
>     </body>
> </html>
​
​

 

posted @ 2021-10-20 17:35  软件开发路上的伴友  阅读(449)  评论(0)    收藏  举报