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>
相关推荐
We་ct37 分钟前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·javascript·算法·leetcode·typescript
陈随易4 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
冰暮流星5 小时前
javascript之事件代理/事件委托
前端
@yanyu6666 小时前
登录注册功能-明文
vue.js·springboot
陈随易6 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
里欧跑得慢8 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
IT_陈寒9 小时前
Vue的这个响应式陷阱,我debug了一整天才爬出来
前端·人工智能·后端
cn_mengbei9 小时前
用React Native开发OpenHarmony应用:Reanimated共享元素过渡
javascript·react native·react.js
kyriewen9 小时前
前端测试:别为了100%覆盖率而写测试,那是自欺欺人
前端·javascript·单元测试
去伪存真9 小时前
我自己写的第一个skills--project-core-standards
前端·agent