加加减减案例
目标:点击生成按钮，新增一个li(随机数字)和删除按钮，
点击删除按钮，删除对应的li和值
提示:数组渲染列表。生成和删除和围绕数组操作
1 渲染当前内容框的数据
2 修改内容框的数据 item 数组中的数据
3 删除按钮添加点击事件 del删除 i下标
4 生成按钮添加添加事件
5 解释以下代码:
add() {
this.arr.push(Math.floor(Math.random() * 20));
},
del(index) {
this.arr.splice(index, 1);
}
},
add()：定义了一个名为add的方法，没有参数。
this.arr：表示当前组件中的arr数组。
push()：是JavaScript中Array对象的一个方法，用于向数组末尾添加元素。
Math.random()：是JavaScript中的一个函数，生成一个0到1之间的随机数。
Math.floor()：是JavaScript中的一个函数，将小数向下取整为整数。
Math.floor(Math.random() * 20)：生成0到19之间的随机整数。
最终效果是将一个0到19之间的随机整数添加到arr数组的末尾。
del(index)：定义了一个名为del的方法，接收一个参数index。
this.arr：表示当前组件中的arr数组。
splice()：是JavaScript中Array对象的一个方法，用于向数组中添加或删除元素。
splice(index, 1)：从数组中删除指定位置（index）的一个元素（1）。
最终效果是从arr数组中删除指定位置（index）的一个元素。
代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, i) in arr" :key="item">
<span>{{ item }}</span>
<button @click="del(i)">删除</button>
</li>
</ul>
<button @click="add">生成</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
arr: [1, 5, 3]
},
methods: {
add() {
this.arr.push(Math.floor(Math.random() * 20));
},
del(index) {
this.arr.splice(index, 1);
}
},
})
</script>
</body>
</html>
