vue实现表格的增删改查(简易版)
Vue是一种流行的JavaScript框架,用于构建用户界面。它被设计成易于使用和灵活的,可以与现有的项目集成。Vue具有响应式的数据绑定和组件化的架构,使开发者能够轻松地构建交互性强的单页应用程序。Vue还具有丰富的生态系统,包括插件和工具,使开发过程更加高效。
·
什么是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>
更多推荐
已为社区贡献1条内容
所有评论(0)