用vue实现一个增删改查案例
Posted 我和我的小生活
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用vue实现一个增删改查案例相关的知识，希望对你有一定的参考价值。
首先需要准备好vue.js包
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo01</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="./lib/vue.js"></script>
<style>
.course{
width: 1200px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
}
.course .editPanel{
border-bottom: 1px solid #ccc;
padding: 20px;
}
.course .editPanel label{
margin-right: 20px;
}
.course .editPanel input{
width: 150px;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
outline: none;
border: 1px solid #aaa;
}
.course .editPanel input[type=button]{
width: 70px;
background-color: rgb(50,120,180);
padding: 5px 20px;
letter-spacing: 5px;
color: #eee;
}
.course .editPanel .search{
margin-left: 50px;
}
.course .list{
padding: 20px;
}
.course .list table{
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
.course .list table tr td,.course .list table tr th{
padding: 10px;
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
line-height: 14px;
}
.course .list table tr td a{
color: #369;
text-decoration: none;
}
.course .list table .firstCol{
width: 50px;
}
</style>
</head>
<body>
<div class="course" id="course">
<div class="editPanel">
<label for="">序号：<input type="text" v-model="id"></label> //v-model指令可以实现表单元素和model中数据的双向数据绑定
<label for="">课程：<input type="text" v-model="cName"></label>
<label for="">教师：<input type="text" v-model="teacher" @keyup.enter="add"></label>
<input type="button" value="添加" @click="add">
<lable for="" class="search">搜索：<input type="text" v-model="keyword" @keyup="search(keyword)"></lable>
</div>
<div class="list">
<table>
<thread>
<tr>
<th class="firstCol">序号</th>
<th>课程</th>
<th>教师</th>
<th>时间</th>
<th>操作</th>
</tr>
</thread>
<tbody>
<tr v-for="item in search(keyword)" :key="item.id"> //v-for循环的时候，key属性只能使用number获取string
//注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。
//加上一个key（能够保证数据的唯一性）
<td>{{item.id}}</td>
<td>{{item.cName}}</td>
<td>{{item.teacher}}</td>
<td>{{item.time | timeFormat(\'cn\')}}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td> //需要根据id传参
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var vm=new Vue({
el:\'#course\',
data:{
id:\'\',
cName:\'\',
teacher:\'\',
time:new Date(),
keyword:\'\',
list:[
{\'id\':1,\'cName\':\'语文\',\'teacher\':\'小明\',\'time\':\'2020-1-3\'},
{\'id\':2,\'cName\':\'数学\',\'teacher\':\'小红\',\'time\':\'2020-2-3\'},
{\'id\':3,\'cName\':\'英语\',\'teacher\':\'小华\',\'time\':\'2020-3-3\'}
]
},
methods:{
// 增加一条记录
add:function(){
if(this.id.length>0&&this.cName.length>0&&this.teacher.length>0){ //确保都有数据
this.list.push({\'id\':this.id,\'cName\':this.cName,\'teacher\':this.teacher,\'time\':this.time})
}else{
alert(\'请填入完整的课程信息！\');
}
},
// 删除一条记录
del:function(id){ // 根据id删除数据
for(var i=0;i<this.list.length;i++){
if(this.list[i].id==id){
this.list.splice(i,1); //从索引为i的位置开始删除，删1个
}
}
},
search:function(word){
var result=[];
for(var i=0;i<this.list.length;i++){
if(this.list[i].cName.toLowerCase().indexOf(word.toLowerCase())>-1){ //toLowerCase()方法用于把字符串转换为小写
result.push(this.list[i]);
}
}
return result;
},
},
filters:{
timeFormat:function(dateStr,pattern){
var date=new Date(dateStr);
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var result=\'\';
if(pattern){
switch(pattern.toLowerCase()){
case \'cn\':
result=year+\'年\'+month+\'月\'+day+\'日\';
break;
case \'en\':
result= year+\'-\'+month+\'-\'+day;
break;
default:
result=year+\'.\'+month+\'.\'+day;
break;
}
}else{
result=year+\'.\'+month+\'.\'+day;
}
return result;
}
}
})
</script>
</html>
以上是关于用vue实现一个增删改查案例的主要内容，如果未能解决你的问题，请参考以下文章
SpringBoot整合MyBatis实现增删改查案例完整版（附源代码）