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

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

     //
        //td是定义表头元素，有加粗效果
          

       

          
编号
名字
          
价格
        
      
      

        

          
{{value.num}}
          
{{value.name}}
          
{{value.price}}
        
       
    

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

建立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循环中输出数组下标

    
{{index}}>={{arrs}}

用相同的js文件，输出结果为
0>=1
1>=2
2>=3
//>=是连接符号，可以随意用任意一个连接符号

在for循环中输出数组对象

    
{{value.num}},{{value.name}},{{value.price}}

用相同的js文件，输出结果为
1,草莓,5
2,芒果,14
3,哈密瓜,11