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>
相关推荐
鸡吃丸子9 分钟前
常见的实时通信技术(轮询、sse、websocket、webhooks)
前端·websocket·状态模式
胡斌附体36 分钟前
vue添加loading后修复页面渲染问题
前端·javascript·vue.js·渲染·v-if·异步加载
Dontla1 小时前
Webpack DefinePlugin插件介绍(允许在编译时创建JS全局常量,常量可以在源代码中直接使用)JS环境变量
运维·javascript·webpack
酷爱码2 小时前
css中的 vertical-align与line-height作用详解
前端·css
沐土Arvin2 小时前
深入理解 requestIdleCallback:浏览器空闲时段的性能优化利器
开发语言·前端·javascript·设计模式·html
专注VB编程开发20年2 小时前
VB.NET关于接口实现与简化设计的分析,封装其他类
java·前端·数据库
小妖6662 小时前
css 中 content: “\e6d0“ 怎么变成图标的?
前端·css
L耀早睡3 小时前
mapreduce打包运行
大数据·前端·spark·mapreduce
咖啡の猫3 小时前
JavaScript基础-创建对象的三种方式
开发语言·javascript·ecmascript
MaCa .BaKa3 小时前
38-日语学习小程序
java·vue.js·spring boot·学习·mysql·小程序·maven