vue指令 v-for 数据遍历 列表渲染

语法

<div v-for="item in items">{{ item.text }}</div>

<div v-for="(item, index) in items"></div>
<div v-for="(val, key, index) in object"></div>

列表渲染

<template>
  <div class="hello">
    <ul>
      <li v-for="u in users" :key="u.id">{{u.id}}--{{u.name}}</li>
    </ul>
    <ul>
      <li v-for="(u,index) in users" :key="u.id">{{index}}--{{u.id}}--{{u.name}}</li>
    </ul>
    <ul>
      <li v-for="(val, key, index) in userObj" :key="val">{{val}}--{{key}}--{{index}}</li>
    </ul>
  </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      users: [
        {id: 1, name: 'zhangguolao'},
        {id: 2, name: 'lvdongbin'},
        {id: 4, name: 'lvdongbin'},
        {id: 3, name: 'lancaihe'}
      ],
      userObj: {
        id: 1,
        name: 'xuerengui',
        age: 23
      }
    }
  }
}
</script>

输出图片

v-for :key值得设定

语法
<ul>
	<li v-for="((item,index) in list)" :key="item">{{item}}--{{index}}</li>
</ul>

key值主要得作用是在往页面中插入元素的时候，执行效率更高——————实际上如果不是一页中数据量极大，效率微乎其微

因为列表数据一般都会有一个唯一标识，所以一般设定得时候，key值多以item中得id为唯一标识

如果key值发生了重复，运行的时候会出现警告

<!--  -->
<template>
<div>
  <ul>
    <li v-for="(item,index) in liList" :key="item.id">{{item.id}}--{{item.name}}--{{index}}</li>
  </ul>
  <button @click="insertLi()">插入元素</button>
</div>
</template>

<script>
export default {
  name: 'VueBase',
  data () {
    return {
      liList: [
        {id: 1, name: 'zhang'},
        {id: 2, name: 'wang'},
        {id: 4, name: 'li'},
        {id: 5, name: 'zhao'}
      ]
    }
  },
  methods: {
    insertLi () {
      this.liList.splice(2, 0, {id: 3, name: 'bai'})
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>