vue过滤器
Vue.filter
<!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="./lib/bootstrap.css">
</head>
<body>
<div id="app">
<!-- msgl中的参数是要替换成的最终结果 也就是 '你们' 替换 '单纯'-->
<p>{{msg | msgL('你们') }}</p>
</div>
<div id="app2">
<p>{{msg | msgL('你们') }}</p>
</div>
<script src="./lib/Vue.js"></script>
<script>
//定义个全局过滤器
Vue.filter('msgL',function(msg,reg){//第一个参数固定
return msg.replace('单纯',reg)
})
var vm = new Vue({
el:'#app',
data:{
msg:'单纯 邪恶 疯狂 哈哈'
},
methods:{
}
});
var vm2 = new Vue({
el:'#app2',
data:{
msg:'单纯 邪恶 疯狂 哈哈'
},
methods:{
},
//定义私有过滤器
filters:{
msgL:function(msg){
}
}
});
</script>
</body>
</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>
<link rel="stylesheet" href="./lib/bootstrap.css">
</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
<!-- 添加的时候输入名称后 按下回车键 就执行添加 -->
<!-- 按键修饰符 enter(回车键) tab delete esc space up down left right -->
<input type="text" class="form-control" v-model='name' @keyup.f2="sub">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="sub">
<label >搜索关键字:
<!-- 增加两个自定义指令,一个是v-focus 一个是v-color 并在第二指令中设置value值 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
</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>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | time()}}</td>
<!-- 绑定事件,并组织默认行为 默认行为是a标签的行为 -->
<td><a href="" @click.prevent='del(item.id)' v-fontweight="900" v-fontsize="5">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/Vue.js"></script>
<script>
//过滤器
// Vue.filter('过滤器名称',function(){})
Vue.filter('time',function(dateStr,pattern=''){
//根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr)
var year = dt.getFullYear()
//月和日有可能为单数 单数的时候在前面加0
//所以先将月和日的值转换成字符串 然后进行padstar填充字符串
var month = (dt.getMonth()+1).toString().padStart(2,'0')
var date = (dt.getDate()).toString().padStart(2,'0')
//返回值 模板字符串
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${year}-${month}-${date}`
}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 `${year}-${month}-${date} ${hh}:${mm}:${ss}`
}
})
//定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
//自定义全局指令让输入框获得焦点 指令都是v-开头
//其中参数1:是指令的名称 在定义的时候,指令的名称前面不需要写上v-这个开头,在调用的时候就要加上这个开头
//第一参数永远是el,表示指令的绑定的元素,属于原声JS对象
//参数2:是一个对象,有相关的函数,函数在特定阶段执行相关操作
//刚绑定(bind)指令的时候,还没有插入(inserted)到DOM中,这时候调用是没有效果的
//只有插入DOM之后,只能生效
//比如自定义一个v-focus的指令
Vue.directive('focus',{
//每当指令绑定到元素的时候,会立即执行bind函数,只执行一次
bind:function(el){
},
//表示元素插入到DOM中的时候,会执行inserted这个函数.触发一次
inserted:function(el){
el.focus()
},
//当更新的时候,会执行这个函数,可能会触发多次
updated:function(el) {
}
})
//自定义一个v-color的指令
Vue.directive('color',{
bind:function(el,binding){//和样式相关的操作都可以在bind中执行
el.style.color = binding.value
},
inserted:function(){//和JS相关的,最好在inserted中执行,防止JS行为不生效
}
})
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',//搜索的关键字
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()},
]
},
methods:{
//点击添加 就会往数组中插入一条数据
sub(){
var list = {id:this.id,name:this.name,ctime:new Date()}
this.list.push(list)
//添加之后输入框的内容清空
this.id = this.name = ''
},
//根据id删除数据
del(id){
//方法一 some
// this.list.some((item,i)=>{
// if(item.id === id){
// this.list.splice(i,1)
// return true
// }
// })
//方法二 findIndex
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=>{
//如果关键字的内容包含在name中 如果包含返回true
if(item.name.includes(keywords)){
return item
}
})
}
},
//自定义私有指令
directives:{
'fontweight':{//设置字体粗细
bind:function(el,binding){
el.style.fontWeight = binding.value
}
},
//简写
'fontsize':function(el,binding){//这样写等用于把代码写到bind和update中去
//binding.value的值转换成整型
el.style.fontSize = parseInt(binding.value)+'px'
}
}
});
</script>
</body>
</html>如果有问题,欢迎在评论区留言!