目标: 点击生成按钮, 新增一个li(20以内的随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值
1.渲染数据
2.给生成注册监听事件
3.给删除注册监听事件
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="index">
<span>{{item}}</span>
<button @click="del">删除</button>
</li>
</ul>
<button @click="A(index)">生成</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [] //可在数组里面初始化数据
},
methods: {
A() {
// 生成1-19的随机数
let Num = Math.floor(Math.random() * 20)
// 将随机数追加到数组里
this.list.push(Num)
},
// 接收到index 传过来的实参
del(inde) {
// this.list.splice(this.list.item, 1)
this.list.splice(inde, 1)
// 删除索引 删一个
}
}
})
</script>
1612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
