vue 循环结构 v-for

循环结构 v-for

循环数组

用于循环取得数据，类似于js中for-in循环 ，其中in左侧为值，其名称可以自定义，in后为想要取出数据的变量名

 

运行可以得到结果

 in左侧不仅仅只可以放一个值，不仅可以取得它的值，还可以获得她它的索引值

 

如果不仅仅是简单的数组，例如数组中的内容是一个个的对象，就需要在引用时利用对象调用的方式

 

 

 循环对象

语法和循环数组是相同的，但是在in的左边有三个量，按顺序依次是 值 、键、索引 （顺序固定）

 

运行同样可以得到

 

key指令的作用：给循环出的数据分区，以便用来区分不同的元素，其值一般为唯一键（例如索引值）。

v-if和v-for的结合

 

 

 

 运行得到结果

 

 可以看到这里只出现立刻一个数据对比之前的输出结果，可以用于筛选数据