vue的指令
6.循环指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环指令</title> </head> <body> <div id="app"> <ul> <li v-for="s in arr">{{ s }}</li> <!-- 1.列表循环指令: v-for="ele in 容器变量" --> </ul> <hr> <ul> <li v-for="(s, i) in arr" :key="s" b="b">第{{ i }}个：{{ s }}</li> <!--key属性是vue的属性，表示为该标签在内存中建立缓存的依据--> </ul> <!--:key把s变成变量，代表唯一性--> <!-- s是列表的值，i是列表的索引--> <ul> <li v-for="v in person">{{ v }}</li> </ul> <ul> <li v-for="(v, k, i) in person">{{ k }}:{{ v }}:{{ i }}</li> <!-- 2.字典循环指令: v-for="ele in 容器变量" --> </ul> <!-- v是字典的值，k是字典的键，i是字典的索引--> <hr> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { arr: ['aaa', 'bbb', 'ccc'], person: { 'name': 'Bob', 'age': 18, 'sex': '男' } }) </script> </html>