Vue-实现列表显示与增删记录
2019-05-17 本文已影响0人
瑟闻风倾
1. 需求说明
实现水果列表的显示，并能够增删记录。显示效果如下：
水果列表.png
2. 功能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
#title{
width: 800px;
margin: 20px auto;
}
#tb{
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th{
background-color: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td{
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
<div id="app">
<div id="title">
<input type="text" placeholder="请输入编号" v-model="id">
<input type="text" placeholder="请输入名称" v-model="name">
<button @click="addData">添加</button>
</div>
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length == 0">
<td colspan="4">当前列表无数据</td>
</tr>
<!-- v-for的特点：当list发生改变时，vue.js会自动调用v-for重新生成数据，即自动完成数据刷新工作 -->
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.creatTime}}</td>
<!-- href="#"和href="javascript:void(0)"并未看出区别 -->
<td><a href="javascript:void(0)" @click="deleteData(item.id)">删除</a></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"火龙果",creatTime:new Date()},
{id:2,name:"哈密瓜",creatTime:new Date()},
{id:3,name:"猕猴桃",creatTime:new Date()},
{id:4,name:"苹果",creatTime:new Date()},
{id:5,name:"冬瓜",creatTime:new Date()},
{id:6,name:"水蜜桃",creatTime:new Date()},
{id:7,name:"圣女果",creatTime:new Date()},
{id:8,name:"西瓜",creatTime:new Date()},
{id:9,name:"黄桃",creatTime:new Date()},
{id:10,name:"无花果",creatTime:new Date()},
{id:11,name:"南瓜",creatTime:new Date()},
{id:12,name:"樱桃",creatTime:new Date()},
{id:13,name:"千禧果",creatTime:new Date()},
{id:14,name:"北瓜",creatTime:new Date()},
{id:15,name:"仙桃",creatTime:new Date()},
{id:16,name:"黄瓜",creatTime:new Date()},
{id:17,name:"冬枣",creatTime:new Date()},
{id:18,name:"西红柿",creatTime:new Date()},
{id:19,name:"龙眼",creatTime:new Date()},
{id:20,name:"西柚",creatTime:new Date()}
],
id:"",
name:""
},
methods:{
addData:function(){
if(this.id != "" && this.name != ""){
this.list.push({id:this.id,name:this.name,creatTime:new Date});
this.id = "";
this.name = "";
}else{
alert("编号或名称为空！")
}
},
deleteData:function(id){
if(!confirm("确认删除?")){
return;
}
//数组的findIndex(参数为一个回调函数)方法：根据id获取索引值
var index = this.list.findIndex(function(item){
return id == item.id;
});
//数组的splice(索引，个数)方法：从哪个位置删除几个元素
this.list.splice(index,1);
}
}
});
</script>
</html>
备注：列表按搜索条件查询及日期格式化可参考Vue-过滤器(系统过滤器和自定义过滤器)中的eg1和eg2。
