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>

相关文章

  • vue中v-for循环

    v-for 循环 v-for表格

  • vue笔记-v-for指令学习(五)

    v-for循环普通数组 v-for循环对象数组 v-for循环对象属性 v-for迭代数字 注意点:2.2.0+后...

  • Vue 基础

    Vue 起步 Vue V-for循环 (一) Vue V-for 循环(二) Vue v-for表格

  • Vue.js入门整理

    Vue基础 常用指令循环v-for数组v-for="name in arr" , json格式v-for="nam...

  • 2020-02-05

    v-for循环对象数组 v-for 循环对象

  • 2018-09-10第一节vue

    v-for循环1,用vue输出内容 2,用v-for循环数组或对象 3,用v-for循环输出数组对象

  • vue.js 列表渲染

    v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in it...

  • Vue基础(下)

    (一)v-for v-for作用:根据数据生成列表结构数组常与v-for结合使用语法常常是(item,index)...

  • Vue2.0 列表渲染(译)

    v-for 我们用v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要以 item in item...

  • Vue v-for循环报错

    记得之前写过v-for但是报错,后来找到原因如下: v-for (需要注意的是,v-for循环需要嵌套在div外...

网友评论

      本文标题:v-for

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