vue-cli: v-for遍历数组 的用法

一. v-for

格式: v-for=“xx in data” :key=“index”

1. 需要绑定唯一的key
2. in可以换成of
3. 当没有id的时候, 就要写成[v-for="(item, index) in data" :key=“index”]
   当有id的时候, 就可以写成[v-for=“item in data” :key=“item.id”]
4. 随机生成六位数 --> 生成随机数 Math.random() --> 取小数点后六位的一个数 .toFixed(6) --> 把0.替换成空串, 也就是把小数变成整数 .replace(‘0.’, ‘’)

<template>
  <div>
    <h1>v-for遍历数组</h1>
    <div v-for="(item, index) of arr" :key="index">{{ item }}</div>
    <hr>
    <ul :style="{textAlign: 'left'}">
      <li v-for="news in newsList" :key="news.id">{{ news.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Demo4',
  data () {
    return {
      arr: [1, 2, 3, 4, 5],
      newsList: [
        {
          id: 1,
          title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
        },
        {
          id: 2,
          title: '噜啦噜啦嘞绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿'
        },
        {
          id: 3,
          title: '红红火火恍恍惚惚或或或或或或'
        }
      ]
    },
    // 随机生成六位数 --> 生成随机数 Math.random() --> 取小数点后六位的一个数 .toFixed(6) --> 把0.替换成空串, 也就是把小数变成整数 .replace('0.', '')
	methods: {
    	test () {
			this.newsList.map((item) => {
				this.$set(item, 'id', Math.random().toFixed(6).replace('0.', ''))
            })
        }
    }
}
</script>