成都网站建设设计

将想法与焦点和您一起共享

CSS动态样式---基础-控制是否添加CSS类-创新互联

功能:三个背景框,点击按钮添加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类

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:CSS动态样式---基础-控制是否添加CSS类-创新互联
文章出自:http://chengdu.cdxwcx.cn/article/djsocc.html