vue

vue/循环渲染.md

@@ -0,0 +1,89 @@
+# 循环渲染
+
+### v-for 遍历数组
+
+语法：
+
+​	v-for="(item,index) in arr" :key="index"
+
+> ​	arr是被渲染的数组，item是被迭代的数组元素的别名 ， index 指代数组的索引值 
+
+示例：
+
+```
+ <div v-for="(item,index) in arr" :key="index">
+      第{{index}} 个元素  值为{{item}}
+ </div>
+ 
+ 变体：
+  <div v-for="(i,j) in pics" :key="j">
+      第{{j}} 个元素  值为{{i}}
+ </div>
+```
+
+```
+var app = new Vue({
+            el: '#app',
+            data: {
+               arr:['a','b','c','d','e']
+            },
+        })
+```
+
+效果如下：
+
+![image-20201222101315624](循环渲染.assets/image-20201222101315624.png)
+
+
+
+### v-for 遍历对象的属性
+
+
+
+语法： 
+
+​	v-for="(item,index) in obj" :key="index"
+
+> obj 是要遍历的对象   item 指代的是对象的值    index 指代的是对象的键
+
+示例：
+
+```
+ <div v-for="(item,index) in obj" :key="index">
+      键为index  值为{{item}}
+ </div>
+```
+
+```
+var app = new Vue({
+    el: '#app',
+    data: {
+        obj: {
+        title: 'How to do lists in Vue',
+        author: 'Jane Doe',
+        publishedAt: '2016-04-10'
+        }
+    },
+})
+```
+
+
+
+效果如下：
+
+![image-20201222110247849](循环渲染.assets/image-20201222110247849.png)
+
+
+
+### v-for 遍历范围值
+
+```
+<div>
+  <span v-for="n in 10">{{ n }} </span>
+</div>
+```
+
+![image-20201222111007833](循环渲染.assets/image-20201222111007833.png)
+
+
+