<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css">
<script src="../vue.js"></script>
</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">
<label for="">
ID:
<input type="text" class="form-control" v-model="id">
</label>
<label for="">
Name:
<input type="text" class="form-control" v-model="name">
</label>
<!-- 在vue中使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参数了 -->
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label for="">
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前，v-for中的数据都是直接从data 上的list中直接渲染过来的。现在，我们自定义了一个search 方法，同时把所有的关键字，通过传参的形式，传递给了search方法， -->
<!-- 在 search 方法内部，通过执行for 循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td> {{item.Ctime | dataFormat()}} </td>
<td>
<!-- 注意阻止默认行为，给函数添加小括号可以传参，根据id来删除 -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//全局的过滤器，进行时间的格式化
Vue.filter('dataFormat',function(dateStr,pattern=""){
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
// return y + '-' + m + '-'+d
// return `${y}--${m}--${d}`
if( pattern.toLowerCase() === 'yyyy-MM-DD'){
// if( pattern && pattern.toLowerCase() === 'yyyy-MM-DD'){
return `${y}--${m}--${d}`
}else{
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}--${m}--${d} ${hh}:${mm}:${ss}`
}
})
let vm = new Vue({
el: '#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'奔驰',Ctime:new Date()},
{id:2,name:'宝马',Ctime:new Date()},
]
},
methods:{
add(){ //添加的方法
// 获取到id 和name 直接data上获取
//2. 组织一个对象
// 3. 把这个对象，调用数组的相关方法，添加到当前data上的list中
// 注意 在vue中已经实现了数据的双向绑定，每当我们修改了data中的数据，vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
let car = {id :this.id,name:this.name,Ctime:new Date().toLocaleString()};
this.list.push(car);
this.id = this.name = '';
},
del(id){ //根据id删除数据
//1. 如何根据id 找到删除这一项的索引
// 2.如果找到了索引，直接调用数据的splice 方法
// this.list.some((item,i)=>{
// if(item.id === id){
// this.list.splice(i,1)
// // 在数组的some方达中。如果return true，就会立即终止这个数组的后续循环
// return true;
// }
// })
let index = this.list.findIndex(item => {
if(item.id === id){
return true;
}
})
this.list.splice(index,1)
},
search(keywords){
// let newList = []
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item);
// }
// })
// return newList
// forEach some filter findIndex
// 都会对数组中的每一项，进行遍历，执行相关操作
var newList = this.list.filter(item =>{
// if(item.name.indexof(keywords) != -1)
// jquery 中的一种方法 $(':contains(哈)')选出带哈的
// <p>123哈哈哈</p> <p>娃哈哈</p> <p>345</p>
// 注意 ： es6为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')，如果包含，返回true,否则返回false
if(item.name.includes(keywords)){
return item
}
})
return newList;
}
}
});
</script>
</body>
</html>
<!-- 过滤器 -->
<!-- 过滤器调用时候的格式 {{ name | 过滤器的名称 }} -->
<!-- 过滤器的定义语法 -->
<!--
Vue.filter('过滤器的名称',function(){})
-->
<!-- 过滤器中的 function ，第一个参数已经被规定死了，永远都是 过滤器 管道符前面传 递过来的数据-->
<!--
Vue.filter('过滤器的名称'，function (data){
return data + '123 '
})
-->
02.案例以及过滤器
最新推荐文章于 2022-07-21 09:14:58 发布
1192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
