前端笔记Vue项目day1(七）

循环结构v-for 用于循环的数组里面的值可以是对象，也可以是普通元素   [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <ul id="example-1">    <!-- 循环结构-遍历数组          item 是我们自己定义的一个名字  代表数组里面的每一项          items对应的是 data中的数组-->   <li v-for="item in items">     {{ item.message }}   </li>   </ul> <script>  new Vue({   el: '#example-1',   data: {     items: [       { message: 'Foo' },       { message: 'Bar' }     ]，        } }) </script>   不推荐同时使用 v-if 和 v-for 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。 [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!--  循环结构-遍历对象                 v 代表   对象的value                 k  代表对象的 键                 i  代表索引                --->      <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>   <script>  new Vue({   el: '#example-1',   data: {     items: [       { message: 'Foo' },       { message: 'Bar' }     ]，     obj: {         uname: 'zhangsan',         age: 13,         gender: 'female'     }   } }) </script> key 的作用 key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM [AppleScript] 纯文本查看 复制代码 ? 1 2 3 <ul>   <li v-for="item in items" :key="item.id">...</li> </ul>