v-for指令用法:列表渲染(数组/对象)

责编:menVScode 2018-01-27 1:36 阅读(1108)

        v-for指令:循环遍历数据并渲染数据,有特定的特定语法格式。

        一、渲染数据是数组

        方式1:v-for="item in list"

<template>
  <div id="app">
    <p v-for="item in list">{{item.name}}-{{item.price}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list:[{ name:'apple',price:35 },{ name:'pear',price:26 },{ name:'banana',price:19}]
    }
  }
}
</script>

        方式2:增加索引值,v-for="(item,index) in list"

<template>
  <div id="app">
    <p v-for="(item,index) in list">{{index+1}}、{{item.name}}-{{item.price}}</p>
  </div>
</template>

        

        二、渲染数据是对象

        方式1:v-for="value in objList",参数只有一个的时候渲染出来的是对象value值。

<template>
  <div id="app">
    <p v-for="value in objList">{{value}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      objList:{
        name:'apple',
        price:35,
        date:'2018-01-27',
        weight:'55g'
      }
    }
  }
}
</script>

        方式2:v-for="(value,key) in objList",第二个参数是key值。

<template>
  <div id="app">
    <p v-for="(value,key) in objList">{{key}}:{{value}}</p>
  </div>
</template>

        方式3:v-for="(value,key,index) in objList",第三个参数是索引值

<template>
  <div id="app">
    <p v-for="(value,key,index) in objList">{{key}}:{{value}}:{{index}}</p>
    <router-view/>
  </div>
</template>


        三、v-for可以循环渲染组件:可以动态的向组件添加数据

        父组件

<template>
  <div id="app">
    <childA v-for="(value,key,index) in objList" :objKey="key" :val="value"></childA>
    <router-view/>
  </div>
</template>

<script>
import childA from '@/components/a'
export default {
  name: 'App',
  data(){
    return {
      hello:'word',
      objList:{
        name:'apple',
        price:35,
        date:'2018-01-27',
        weight:'55g'
      }
    }
  },
  components:{childA}
}
</script>

        子组件

<template>
    <div> {{objKey}}:{{val}} </div>
</template>
<script>
export default {
    props:['objKey','val']
}
</script> 


标签: v-for vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码