vue2.0自定义指令方式

最新推荐文章于 2023-06-09 13:24:25 发布

Lofty_ambition

最新推荐文章于 2023-06-09 13:24:25 发布

阅读量535

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qinchaidaren/article/details/77291832

版权

vue.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

分析：当我们在vue中使用默认的指令中（v-if,v-show）,当然在实际的场景中，由于不能满足需求的时候。就需要自定义指令了，下面是自定义指令的方式，用于扩展htm结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<script src='https://unpkg.com/vue'></script>
</head>
<body>
<div id='app'>
<input v-myshow="isShow" type="text" placeholder="请输入选项" value='aa'>
<div v-demo="{color:'red',text:'hello'}">this is a directive</div>
<div v-show="true" v-demo="{color:'green',text:'hello'}">this is another directive</div>
</div>
<script>
//指令中的多个值形式传入对象字面量的形式指令接受所有合法的js表达式
//自定义的指令的形式自定义指令的形式 el binding参数
Vue.directive('myshow',function(el,binding){//定义全局的指令用于模拟默认的v-show
console.log("---")
console.log(binding.value)
if(binding.value == true){
el.style.display="block"
}else if(binding.value == false || binding.value == undefined){
el.style.display="none"
}
});
var vm = new Vue({
el:"#app",
data(){
return{
isShow:true,
foo:'',
}
},
methods:{

},
directives:{
demo:{
inserted(el,binding){//局部指令自定义指令的参数
console.log(el);
console.log(binding.value.color);
console.log(binding.value.text);
//自定义指令的以后，可以得到绑定值做出相应的处理
el.style.color=binding.value.color
}
}
}
})
</script>
</body>
</html>