v-bind有什么作用-创新互联

本篇内容主要讲解“v-bind有什么作用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“v-bind有什么作用”吧!

v-bind-attribute和property这两种类型的绑定被放在元素定义中，如arttrs、props和domProps(value和innerhtml之类的东西)。

v-bind代码

render(h){

returnh('div',{

attrs:{

//

id:this.myCustomId

},

props:{

//

someProp:this.someonePutSomethingHere

},

domProps:{

//

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有什么作用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！