【郑州校区】前端笔记Vue项目第一天六

【郑州校区】前端笔记Vue项目第一天六

循环结构v-for

用于循环的数组里面的值可以是对象，也可以是普通元素

[AppleScript] 纯文本查看 复制代码

<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] 纯文本查看 复制代码

<!--  循环结构-遍历对象
                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] 纯文本查看 复制代码
<ul> <li v-for="item in items" :key="item.id">...</li> </ul>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目 第一天 六

0 个回复

【郑州校区】前端笔记Vue项目第一天六