自定义指令的用法
<script>
//1,创建model
var exampleData = {
count:0,
color:"#000"
};
//2,创建Vue例子
new Vue({
el:"#app",
data:exampleData,
directives:{
hello:{ //自定义指令的名字
bind:function (el,bindings) {//绑定时的发生的函数,只执行一次
console.log(el); //el指向了当前指令绑定的元素上
console.log(bindings) //bindings指的是元素上绑定的数v-hello="count"
},
update:function (el,bindings) {//发生变化时的发生的函数,可执行多次
el.value=parseInt(el.value)+10 ;
console.log();
},
unbind:function (el,bindings) {//终止指令时的发生的函数,只执行一次
console.log("终止指令");
}
},
changeBackgroundColor:{
bind:function (el,bindings) {
console.log("我绑定成功了")
},
update:function (el,bindings) {
el.style.background=bindings.value;//修改当前元素的背景色
}
}
}
});
</script>
过滤器的使用
<script>
//1,创建model
var exampleData = {
price:153,
text:"juhGofkUHkaHUlj"
};
//2,创建Vue例子
new Vue({
el:"#app",
data:exampleData,
filters:{ //过滤器指令的名字
myCurrency:function (myInput,arg1) { //自定义过滤器的函数
console.log(myInput); //myInput指向了this.price
console.log(arg1); //arg1指向了$也就是函数传入的参数<h1>{{price | myCurrency('$')}}</h1>
var result = arg1+myInput;
return result;
},
myTextTransform:function (myInput,arg1) {
if(arg1){ //可以传布尔值来做判断<h1>{{text | myTextTransform(true)}}</h1>
var result = myInput.toUpperCase();
}else {
var result = myInput.toLowerCase();
}
return result;
}
}
});
</script>
获取时间戳可以通过
new Date().getTime();
1554960378173
在vue中可以通过自定义过滤,让时间变为我们想要的样子
比如 2019-4-11 13:26
示例
filters:{
date:function(value){
let d =new Date(value);
return d.getFullYear()+'-'+
(d.getMonth()+1)+'-'+d.getDate()+' '+
d.getHours()+':'+d.getMinutes();
}
}