品牌案例
程序员文章站
2022-05-15 22:45:04
...
实现表格添加、删除、搜索、日期过滤器。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<!-- 输入框双向数据绑定data中属性 -->
<label>Id:<input type="text" class="form-control" v-model="id"/></label>
<label>Name:<input type="text" class="form-control" v-model="name"/></label>
<!-- 绑定click事件 -->
<!-- 给元素绑定事件，后面接方法名指定处理函数，函数可以加小括号进行传参 -->
<input type="button" class="btn btn-primary" value="添加" @click="add()"/>
<label>搜索:<input type="text" class="form-control" v-model="keywords"/></label>
</div>
</div>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 这里怎么循环都是对list进行循环无法进行数据筛选 -->
<!-- key属性为唯一标识，v-bind绑定，后面识别为表达式 -->
<!-- <tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!-- 给元素绑定事件，后面接方法名指定处理函数，函数可以加小括号进行传参 -->
<!-- <td><a href='' @click.prevent="del(item.id)">删除</a></td>
</tr> -->
<!-- 之前v-for中数据直接从data中list取 -->
<!-- 不直接访问list，而是定义一个search方法，把搜索条件当作参数传入，让方法返回一个筛选过的数据 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!-- 给元素绑定事件，后面接方法名指定处理函数，函数可以加小括号进行传参 -->
<td><a href='' @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()},
]
},
methods:{
add(){
/* 获取数据拼接成json加入到数组中 */
/* Vue中,已经实现了双向数据绑定,每当data中数据改变,Vue会监听到data改动,自动把新数据加载到页面table中 */
/* 这里即为Vue特性,更多的对数据进行操作,很少操作dom */
const car = {id:this.id,name:this.name,ctime:new Date()};
this.list.push(car);
/* this.id='';
this.name=''; */
this.id = this.name = '';
},
del(id){
/* 根据id找到数组中对象 */
/* some(function(value,index,array){});判断数组中至少有一个元素满足条件返回true,都不满足返会false，可以直接在里面写处理逻辑 */
/* this.list.some((value,index,array)=>{
if(value.id==id){
this.list.splice(index,1);
return true;
}
}); */
/* findIndex当true的时候返回此时的索引位置 */
const index = this.list.findIndex(item=>{
if(item.id ==id){
return true;
}
});
this.list.splice(index,1);
},
search(keywords){ //根据关键字筛选数组
/* 用forEach循环 */
/* let newList=[];
this.list.forEach(item=>{
if(item.name.indexOf(keywords)!=-1){ //数组这个数据的name包含关键字
newList.push(item);
}
});
return newList; */
/* forEach some filter findIndex都是数组的新方法 */
return this.list.filter(item=>{ //筛选出符合条件的元素形成新数组
//includes判断是否包含字符串,es6新方法String.prototype.includes('判断要包含的字符串')
if(item.name.includes(keywords)){
return item;
}
});
}
}
})
</script>
</body>
</html>
如果需要异步访问后台完成上述操作：
- 初始获取数据时，在
created()钩子函数中调用获取数据函数（此时data和methods已初始化可调用）。 - 新增删除成功回调再调用获取数据函数。
- 使用全局配置设置地址公共地址。
上一篇： jquery样式操作与绑定click事件
下一篇： 一个有故事的男人