<script>
// 添加全局过滤器, 进行时间格式化
Vue.filter('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
// 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}`
}
})
var vm = new Vue({
el: '#app',
data: {
id:"",
name:"",
keywords:"",
list: [
{id: 1, name: '奔驰', ctime: new Date()},
{id: 2, name: '宝马', ctime: new Date()},
{id: 3, name: '奥迪', ctime: new Date()},
{id: 4, name: '林肯', ctime: new Date()},
]
},
methods: {
add() { // 添加的方法
// 分析:
// 1. 获取到 id 和 name ,直接从 data 上面获取
// 2. 组织出一个对象
// 3. 把这个对象,调用 数组的 相关方法,添加到 当前 data 上的 list 中
// 4. 注意:在Vue中,已经实现了数据的双向绑定,每当我们修改了 data 中的数据,Vue 会默认监听到数据的改动,自动把最新的数据,应用到页面上;
// 5. 我们更多的是进行 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;*/
return this.list.filter(item => {
/*if (item.name.indexOf(keywords) != -1)*/
// 注意: ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')
// 如果包含,则返回 true ,否则返回 false
if (item.name.includes(keywords)){
return item;
}
})
}
}
})
var vm2 = 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')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
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('过滤器的名称', funciton(){})
// 过滤器中的function ,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据
/*Vue.filter('过滤器名称', function(data) {
return data + '123'
}*/
</script>
https://www.cnblogs.com/cgy-home/p/11326204.html
另一种方法
https://www.cnblogs.com/cgy-home/p/11326204.html
// 1. 导入Vue
import Vue from 'vue'
// 导入格式化时间的模块
import moment from 'moment'
// 定义全局的时间过滤器
Vue.filter('dateFormat', function (dateStr, formatStr = 'YYYY-MM-DD HH:mm:ss') {
// 在过滤器的处理函数中,最后,必须 return 一个东西,这样,才是一个合法的过滤器
return moment(dateStr).format(formatStr)
})