v-for

2020-12-28  本文已影响0人  李小白呀

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

 <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 更高的优先级。

 <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 的作用
o key来给每个节点做一个唯一标识
o key的作用主要是为了高效的更新虚拟DOM

 <ul>
   <li v-for="item in items" :key="item.id">...</li>
 </ul>

遍历作用域插槽

<template slot-scope="scope">
  <el-link
     :underline="false"
     type="primary"
     v-for="(item,id) in scope.row.questionIDs"
     :key="id"
     @click="preview"
     >
    {{item.number}}
  </el-link>
</template>
上一篇 下一篇

猜你喜欢

热点阅读