vue实现表格的增删改查（简易版）

最新推荐文章于 2024-05-19 23:48:54 发布

qq_75222206

最新推荐文章于 2024-05-19 23:48:54 发布

阅读量2.7k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_75222206/article/details/131708650

版权

什么是vue

Vue是一种流行的JavaScript框架，用于构建用户界面。它被设计成易于使用和灵活的，可以与现有的项目集成。Vue具有响应式的数据绑定和组件化的架构，使开发者能够轻松地构建交互性强的单页应用程序。Vue还具有丰富的生态系统，包括插件和工具，使开发过程更加高效

实现思路

通过导入vue框架，完成对数据的处理。基本操作有4种，分别是增删改查。

增加：增加的功能这里使用2种函数进行实现。一种是添加函数，一种是插入函数。在增加函数的时候，长度也会跟着变化

删除：删除功能通过筛选器来实现，删除过后返回的id与原来信息对应id不同

修改：修改需要使用find函数。通过find函数找到与原id一致的信息

代码实现：

<!DOCTYPE html>
<head>
<script src="vue.min(1).js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" cellpadding="20">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作 |<button @click="addHero">新增</button></th>
            </tr>   
            <tr v-for="hero in heroList" :key="hero.id">
                <td>{{hero.id}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.age}}</td>
                <td><button @click="deleteHero(hero.id)">删除</button>|<button @click="edit(hero.id)">修改</button>
        </table>
        <div v-show="isInputShow">
            <h3>新增英雄</h3>
            <input type="text" v-model="hero.id " placeholder="请输入序号"><br><br>
            <input type="text" v-model="hero.name " placeholder="请输入姓名"><br><br>
            <input type="number" v-model="hero.age" placeholder="请输入年龄"><br><br>
            <input type="submit" @click="insertHero" value="关闭">    <br><br>
        </div>
        <div v-show="isUpdateShow">
            <h3>修改英雄</h3>
            <input type="text" v-model="hero.id " placeholder="请输入序号"><br><br>
            <input type="text" v-model="hero.name " placeholder="请输入姓名"><br><br>
            <input type="number" v-model="hero.age" placeholder="请输入年龄"><br><br>
            <input type="reset" @click="editHero" value="关闭"><br><br>
        </div>

    </div>

</body>
<script>

    new Vue(
        {
            el:'#app',
            data:{
                //控制表单隐藏和显示
                isInputShow:false,
                isUpdateShow:false,
                //双向绑定实现表单数据获取
                hero:{
                    id:'',
                    name:'',
                    age:''
                },
                heroList:[
                    {id:1,name:'曹操',age:36},
                    {id:2,name:'刘备',age:32},
                    {id:3,name:'孙权',age:28}
                ]
            },
            methods:{
                deleteHero(id){
                 this.heroList=this.heroList.filter((e,i)=>{
                    return e.id!=id
                  })
                },addHero(){
                 this.isInputShow=!this.isInputShow
                },insertHero(){
                    this.heroList.push(this.hero)
                    console.log(this.hero)
                },edit(id){
                    this.isUpdateShow=true
                    this.hero=this.heroList.find((e,i)=>{
                    return e.id==id
                  })
                },editHero(n){
                    if(this.isUpdateShow)
                    this.isInputShow=!this.isInputShow
                    this.isUpdateShow=!this.isUpdateShow
                    this.i=n-1
                }
            }
        }
    )
</script>
</html>

qq_75222206

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
vue实现表格的增删改查（简易版）

Vue是一种流行的JavaScript框架，用于构建用户界面。它被设计成易于使用和灵活的，可以与现有的项目集成。Vue具有响应式的数据绑定和组件化的架构，使开发者能够轻松地构建交互性强的单页应用程序。Vue还具有丰富的生态系统，包括插件和工具，使开发过程更加高效。
复制链接

扫一扫