vue样式的动态绑定方式总结

第一种 v-bind:class 和 v-bind:style

  1、对象语法( 通过对象来绑定v-bind:class=“{'css类名':控制是否显示(true or false)}” 



  2、内联样式


3、内联样式-数组语法( v-bind:style='[style1,style2]' 



二、计算属性




三、操作节点

由于vue本身是虚拟dom如果通过document来进行节点样式更改的时候有可能会出现'style' is not definde‘的错误,

这个问题的解决方式就必须得对vue 的理解要求更高一层了,它可以通过在vue本身的周期mounted函数里用ref和$refs 来获取样式,来完成对其样式的更改:示例如下:

1、通过ref操作节点




好啦,终于剧终了。

 


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部