传智黑马39期WEB前端教程-Vue基础-Vue指令-字符串的padStart方法使用
字符串的padStart方法使用
1.进入目录 DEMO，修改文件 16.html
<!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>
<script src="lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
<!-- 需要用到Jquery -->
</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>
Id:
<input type="text" class="form-control" v-model="id" />
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" />
</label>
<!-- 在 Vue 中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
<input type="button" value="添加" class="btn btn-primary" @click="add" />
<label>
搜索关键字名称:
<input type="text" class="form-control" v-model="keywords" />
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<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>{{ item.name }}</td>
<td>{{ item.ctime | dateFormat() }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3>{{ dt | dateFormat }}</h3>
</div>
<script>
// 全局的过滤器，进行时间的格式化
// 所谓的全局过滤器，就是所有的VM实例都能共享
Vue.filter('dateFormat', function(dateStr,pattern=""){
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
//return y + '-' + m + '-' + d;
if (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}`;
}
});
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() { // 添加的方法
// console.log('ok');
// 分析：
// 1.获取到 id 和 name， 直接从 data 上面获取
// 2.组织出一个对象
// 3.把这个对象，调用数组的相关方法，添加到当前 data 上的 list 中
// 4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue 会默认监听到数据的改动，自动把最新的数据，应用到页面上
// 5.当我们意识到上面的第四步的时候，就证明了大家已经入门Vue了，我们更多的是在进行 VM 中 Model 数据的操作，同时，在操作 Model 数据的时候，指定的业务逻辑操作
var car = { id:this.id, name:this.name, ctime:new Date() };
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;
// }
// })
//方法二
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
});
this.list.splice(index, 1);
},
search(keywords) {
// 方法一
// var newList = [];
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item)
// }
// });
// return newList;
//方法二
// 注意 forEach some filter findIndex 这些都属于数组的新方法
// 都会对数组中的每一项进行遍历执行相关的操作
return this.list.filter(item => {
// if (item.name.indexOf(keywords) != -1)
// 注意 ES6中，为字符串提供了一个新方法 String.prototype.includes(要包含的字符串)
// 如果包含，则返回 true，否则返回 false
// contain
if (item.name.includes(keywords)) {
return item;
}
});
}
}
});
// 如何自定义一个私有的过滤器（局部）
var vm = new Vue({
el:'#app2',
data: {
dt: new Date()
},
methods:{},
filters:{ // 定义私有过滤器，过滤器有两个条件 过滤其名称和处理函数
// 过滤器调用的时候， 采用就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用死油过滤器
dateFormat: function(dateStr, pattern = "") {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
//return y + '-' + m + '-' + d;
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
});
// 过滤器的定义语法
// Vue.filter('过滤器名称', function(){})
// 过滤器中的 function 第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter('过滤器名称', function(data){
return data + '123';
});
</script>
</body>
</html>
2.测试
posted on 2019-12-02 13:35 herisson_pan 阅读(21) 评论(0) 收藏 举报
浙公网安备 33010602011771号