博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS动态样式---基础-控制是否添加CSS类
阅读量:6230 次
发布时间:2019-06-21

本文共 585 字,大约阅读时间需要 1 分钟。

功能:三个背景框,点击按钮添加CSS属性,再次点击去除CSS属性。

比如,我想实现只有点击这个元素时才添加这个red类,再次点击时移除red类,为了实现这个功能,需要在Vue实例内添加data属性,以便和模板代码建立联系。attachRed默认false,即默认不添加,点击方框时,需要对attachRed取反,为了按照指定条件添加CSS类,需要用 :class绑定到class属性,即时已经添加了demo这个class属性也无妨,这里的“:class”用的是Vue语法,不再使用HTML元素本身的class属性,它确实是与class属性绑定,而Vue在背后把这些语句合并为一个class对象,所i这里需要传入一个JavaScript对象,着就是Vue要获取的参数,在这个对象里,键应该是下要添加的CSS类名,值用来控制是否添加CSS类,应该是true或者false,在这里我要添加CSS类red,直接写red即可,也可以带上单引号,如果类中包含特殊字符,就必须带上单引号。然后查看效果,点击方框时,背景在红灰之间切换。这一行代码把CSS类red作为键名,引用这里的CSS代码,然后与attachRed联系到一起,鼠标点击可以让attachRed不断在true和false之间切换。

CSS动态样式---基础-控制是否添加CSS类

转载于:https://blog.51cto.com/13577938/2338616

你可能感兴趣的文章
马士兵教学语录
查看>>
计算机网络与Internet应用
查看>>
每天一个linux命令-mkdir
查看>>
四天精通shell编程(二)
查看>>
标签制作软件中如何导出标签模板为PDF文件?
查看>>
Linux运维系统工程师系列---22
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
域结构的网络
查看>>
mysql 命令
查看>>
Oracle 11g rac 生产环境部署详录
查看>>
web.xml 中<taglib>报错
查看>>
Linux文件系统上的特殊权限(SUID、SGID、Sticky)的知识点
查看>>
零部件表设计 T_AIS_BASE_PARTS_INFO
查看>>
fgsdf
查看>>
一、Asp.Net MVC4.0开发CMS系统案例之数据库设计
查看>>
Vue.js 2.x笔记:路由Vue Router(6)
查看>>
HTTP请求对消息主体进行编码的方法
查看>>
归并排序以及逆序数计算
查看>>
jQuery 下拉列表 二级联动插件
查看>>