v-for

作者: 李小白呀 | 来源:发表于2020-12-28 19:20 被阅读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>
    

    相关文章

      网友评论

          本文标题:v-for

          本文链接:https://www.haomeiwen.com/subject/tymtoktx.html