VUE动态修改CSS

在常见的vue开发中需要动态修改css的大小,但是又不能像普通的js那样直接修改dom元素,这个时候我们就要用v-bind来绑定所要改变的样式 通过操作被绑定的样式的变量来操作样式的显示
1.先写要更改的样式


更改的样式

2.在下面的data里面设置变量test1来控制是否显示css


添加控制变量

3.在需要操作的对象里面使用v-bind绑定


v-bind绑定

为了显示的清楚一点下面有test1的值
当test1值为false时 样式不显示

当test1值为true时 样式显示
4.这里用谷歌浏览器的插件来控制test1的值

  • 当值为false时 样式是不显示的


    当值为false时
  • 当值为true时 样式是显示的


    当值为true时

最后实现的效果就是通过控制test1的值来控制css达到动态控制css的效果

你可能感兴趣的:(VUE动态修改CSS)