【Vue2+数组】用两个案例熟悉Vue2的v-for语法和数组的常用方法

目录

案例一、改变数组的顺序, 在头上的就到末尾

解析题目：

主要Vue代码为

案例二、点击生成按钮, 新增一个li(20以内的随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值

解析题目：

主要Vue代码为

点击生成成功： 

 点击删除成功：

---

案例一、改变数组的顺序, 在头上的就到末尾

解析题目：

主要用到的数组方法--->shift()删除第一位的元素和push()追加到最后一位元素的后面

主要Vue代码为

	const app =new Vue({
		el:"#app",
		data:{
			list:[
				{
					id:1,
					name:'程序'
				},{
					id:2,
					name:'函数'
				},{
					id:3,
					name:'属性'
				},{
					id:4,
					name:'网站'
				},
			]
		},
		methods:{
			change(){
				//删除第一个元素并且将第一个元素追加到最后一位元素的后面且返回的是数组的长度
				console.log(this.list.push(this.list.shift()))
			}
		}
	})

案例二、点击生成按钮, 新增一个li(20以内的随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值

解析题目：

使用了一个函数Math()--->此函数不是构造函数，可以直接使用，利用了随机数方法Math.random()方法生成了一个0~1的随机数，由于题目要求生成的20以内的随机数，所以使用了Math.floor(Math.random()*(max-min+1)+min)的方法自己定义一个max最大值和min最小值，生成在[min,max]之间的随机数，并且使用了floor()将随机数取整。

有一个关键点是时间戳+new Date()的用法--->动态的创建id

主要Vue代码为

const app = new Vue({
				el: '#app',
				data: {
					list: [{
						id:1,
						num:Math.floor(Math.random()*(20-0+1)+0)
						}]
				},
				methods:{
					add(){
						this.list.push(
						{
							//需要动态生成id的时候可以利用时间戳的方式代替
							id:+ new Date(),
							num:Math.floor(Math.random()*(20-0+1)+0)}),
							console.log(this.list)
						
					},
					del(id){
						this.list = this.list.filter(item=> item.id !== id)
					}
				}
			})

点击生成成功： 

 点击删除成功：