全局自定义指令
<body>
<div id="app">
<h2 v-if='isLogin'>1</h2>
<h2 v-else='isLogin'>2</h2>
<input v-model='inp' type="text" name="" id="">
<div>{{inp | fn()}}</div>
<!-- v-dream是下面自定义的指令 red 是data里数据-->
<div v-dream='red'>6666</div>
</div>
<script>
// 指令名 el：dom元素， bind指令的信息 包括值等等
Vue.directive('dream', (el, bind) => {
console.log(el)
el.style.color = bind.value
console.log(bind)
})
new Vue({
el: '#app',
data: {
isLogin: true,
inp: '',
red: 'red'
},
// 过滤器
filters: {
fn(val){
let reg = /\D/
if(!reg.test(val)){
return val
}
}
}
})
</script>
</body>
网友评论