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>
相关推荐
答案answer1 天前
一些经典的3D编辑器开源项目
前端·开源·three.js
亿元程序员1 天前
Creator都快4.0了,怎么能没有这样的功能?
前端
q***64971 天前
SpringMVC 请求参数接收
前端·javascript·算法
万少1 天前
流碧卡片 6 小时闪电开发 AI gemini-3-pro-preview ! 秒出小红书爆款图,免下载直接用
前端·后端·ai编程
悟能不能悟1 天前
<style scoped>vue中怎么引用css文件
css·vue.js
向葭奔赴♡1 天前
若依系统权限控制全流程解析
前端·javascript·vue.js·ruoyi·navicat
IT_陈寒1 天前
Python开发者必知的5个高效技巧,让你的代码性能提升50%
前端·人工智能·后端
u***u6851 天前
Vue虚拟现实案例
前端·vue.js·vr
q***96581 天前
springboot3整合knife4j详细版,包会!(不带swagger2玩)
android·前端·后端
艾小码1 天前
Vue 3 defineProps 与 defineEmits 深度解析
前端·javascript·vue.js