vue中的常用指令一（v-for循环）

在HTML中的基础v-for循环代码

<div id="app">
     <table border="0" cellspacing="0"><!--cellspacing：边框为0-->
       <thead>//
        <tr>
          <td>编号</td>//td是定义表头元素，有加粗效果
          <td>名字</td>
          <td>价格</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="value in arr">
          <td>{{value.num}}</td>
          <td>{{value.name}}</td>
          <td>{{value.price}}</td>
        </tr>
       </tbody>
    </table>

</div>

v-for 指令可以绑定数组的数据
value in arr : value为变量名可自己命名，in为固定值，arr为变量（改变量应与script中data所后跟随的变量保持一致）
链接Vue.js

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

建立js文件，在js中绑定数组的数据

var app = new Vue({
  el:"#app",
   data:{
     arrs:[1,2,3,4]
     arr:[
      {num:1,name:草莓,price:5},
      {num:2,name:芒果,price:14},
      {num:3,name:哈密瓜,price:11}
      ] 
   }
})

输出如下 运行结果图.png

在for循环中输出数组下标

<ul>
    <li v-for="(value,index) in arrs">{{index}}>={{arrs}}</li>
</ul>
用相同的js文件，输出结果为
0>=1
1>=2
2>=3
//>=是连接符号，可以随意用任意一个连接符号

在for循环中输出数组对象

<ul>
    <li v-for="value in arr">{{value.num}},{{value.name}},{{value.price}}</li>
</ul>
用相同的js文件，输出结果为
1,草莓,5
2,芒果,14
3,哈密瓜,11