vue小练习之随机生成数字并删除

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <ul v-for="(item,index) in arr" :key="item.id">
        <li>{{item.id}}  <button @click="del(item.id)">{{item.content}}</button></li>
      </ul>
      <button @click="addRandom">生成</button>

    </div>
    <script src="../../vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                // arr:[1,5,3],
                arr:[
                    {id:1,content:'删除'},
                    {id:3,content:'删除'},
                    {id:5,content:'删除'},
                ]


            },
            methods:{
                del(id){
                    this.arr=this.arr.filter(item=>item.id!==id)

                },
                addRandom(){
                    this.arr.push({id:Math.floor(Math.random()*20),content:'删除'})
                }
            }
        })
    </script>
</body>
</html>
相关推荐
m0_738120722 小时前
CTFshow系列——命令执行web38-40
前端·windows·安全·web安全
zhoxier3 小时前
elementui el-select 获取value和label 以及 对象的方法
javascript·vue.js·elementui
是小狐狸呀3 小时前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿6 小时前
常用css
前端·css
你的人类朋友7 小时前
说说git的变基
前端·git·后端
姑苏洛言7 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅7 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry7 小时前
Compose 从 View 系统迁移
前端
IT码农-爱吃辣条7 小时前
Three.js 初级教程大全
开发语言·javascript·three.js
GIS之路7 小时前
2025年 两院院士 增选有效候选人名单公布
前端