Vue 自定义指令
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1 v-color>全局自定义指令</h1>
<p></p>
<h1 v-color2="blue">全局自定义指令2</h1>
<p></p>
<h1 v-color3="yellow">全局自定义指令2</h1>
<p></p>
<h1 v-formart>
1,
2,
3,
4,
05,
20,
100
</h1>
<p></p>
<h1 v-formattime>{{dateFormat}}</h1>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//自定义指令：全局写法
Vue.directive("color", function(el, binding) {
console.log(el);
console.log(binding)
el.style[binding.name] = "red"
}),
Vue.directive("color2", function(el, binding) {
console.log(el);
console.log(binding)
el.style["color"] = binding.expression
})
new Vue({
el: "#app",
data: {
blue: "",
yellow: "",
dateFormat: "",
},
methods: {
},
computed: {
},
mounted: function() {
var date = new Date()
console.log(new Date())
console.log(date.getTime())
this.dateFormat = date.name;
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
var second = date.getSeconds();
second = second < 10 ? ('0' + second) : second;
this.dateFormat = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
},
//自定义指令：局部写法 全部小写
directives: {
"color3": function(el, binding) {
el.style.color = binding.expression
},
"formart": function(el, binding) {
console.log(el.innerText)
//let array = el.innerText.replace(" ","").split(',')
let array = el.innerText.replace(/\s/g, "").split(',')
for (let i = 0; i < array.length; i++) {
if (array[i].length > 1) {
if (array[i][0] == "0") {
continue;
}
} else {
if (array[i] < 10) {
array[i] = "0" + array[i];
}
}
}
el.innerText = array;
},
"formattime": function(el, binding) {
var date = new Date()
console.log(new Date())
console.log(date.getTime())
this.dateFormat = date.toDateString();
},
}
})
</script>
</body>
</html>
指令： 指令名称需要小写
- 系统指令 : v-on, v-model, v-show, v-if
- 自定义指令: v-say, v-hello
1. 全局 定义在 Vue 外边。Vue.directive(指令名称,function(el,bining){})
//自定义指令：全局写法
Vue.directive("color", function(el, binding) {
console.log(el);
console.log(binding)
el.style[binding.name] = "red"
}),
Vue.directive("color2", function(el, binding) {
console.log(el);
console.log(binding)
el.style["color"] = binding.expression
})
2. 局部 定义在 Vue 里面
//自定义指令：局部写法 全部小写
directives: {
"color3": function(el, binding) {
el.style.color = binding.expression
},
"formart": function(el, binding) {
console.log(el.innerText)
//let array = el.innerText.replace(" ","").split(',')
let array = el.innerText.replace(/\s/g, "").split(',')
for (let i = 0; i < array.length; i++) {
if (array[i].length > 1) {
if (array[i][0] == "0") {
continue;
}
} else {
if (array[i] < 10) {
array[i] = "0" + array[i];
}
}
}
el.innerText = array;
},
"formattime": function(el, binding) {
var date = new Date()
console.log(new Date())
console.log(date.getTime())
this.dateFormat = date.toDateString();
},
}