本篇内容主要讲解“v-bind有什么作用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“v-bind有什么作用”吧!
v-bind-attribute和property这两种类型的绑定被放在元素定义中，如arttrs、props和domProps(value和innerhtml之类的东西)。
v-bind代码
render(h){
returnh('div',{
attrs:{
//<div:id="myCustomId">
id:this.myCustomId
},
props:{
//<div:someProp="someonePutSomethingHere">
someProp:this.someonePutSomethingHere
},
domProps:{
//<div:value="somethingElse">
value:this.somethingElse
}
});
}
需要注意的是，对于class和style的绑定是直接在定义的根进行处理，而不是作为attrs，props或domProps处理。
v-bind结构
render(h){
returnh('div',{
//“类”是js中的保留关键字，因此必须引用它。
'class':{
myClass:true,
theirClass:false
},
style:{
backgroundColor:'green'
}
});
}
v-on
对事件处理程也是直接添加到元素定义中on定义
render(h){
returnh('div',{
on:{
click(e){
console.log('Igotclickeded!')
}
}
});
}
事件的修饰符可以在处理程序内部实现：
.stop->e.stopPropagation()
.prevent->e.preventDefault()
.self->if(e.target!==e.currentTarget)return
键盘修饰符
.[TARGET_KEY_CODE]->if(event.keyCode!==TARGET_KEY_CODE)return
.[MODIFIER]->if(!event.MODIFIERKey)return
特殊属性
Slots可以通过this.$slots作为createElement（）节点的数组来访问插槽。
到此，相信大家对“v-bind有什么作用”有了更深的了解，不妨来实际操作一番吧！这里是本站网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
