黑马程序员技术交流社区

标题: 【郑州校区】前端笔记Vue项目 第一天 六 [打印本页]

---

作者: 我是楠楠    时间: 2020-3-18 09:34
标题: 【郑州校区】前端笔记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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2