位置: IT常识 - 正文

Vue 通过style属性、class属性来动态修改CSS样式(vue style import)

编辑:rootadmin
Vue 通过style属性、class属性来动态修改CSS样式

推荐整理分享Vue 通过style属性、class属性来动态修改CSS样式(vue style import),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue style import,vue的:style,vue中style的scoped,vue绑定style属性里的属性,vue中style用法,vue中style的scoped,vue-styleguidist,vue中style的scoped,内容如对您有帮助,希望把文章链接给更多的朋友!

目录

前情提要

总结

修改class属性总结

修改style属性总结

修改class属性

修改style属性

整活时间,超级变变变

前情提要

需求:根据data某些属性,动态修改某个节点的样式或者class

1、首先很重要的一点是 v-bind: 引号内的是JS表达式而不是单纯一个值或者字符串,判断时候使用的是truthy真值,而不是布尔值,大白话就是会进行类型转换。就当成你在script标签中写的JS就行了(注意区分JS表达式和JS代码)

JS表达式:产生一个值,可以放在任何需要值的地方,用处非常大,如三目表达式、1+'2'、Math.max(a,b)、vue里的有返回值的methods,computed,props里的属性等等JS代码(语句): 如if(x>1){.......}

2、另一点是,你需要保证动态的变量被vue所管理,能监听到变化,深入响应式原理 — Vue.js

如果没有动态更新,请考虑数据是不是响应式,浏览器支持(IOS某些版本有问题),页面渲染问题($nexttick)等因素。

这样节点才会重新渲染。

PS:动态修改class或Style不会和原生的属性冲突,效果是加法,你可以静态和动态都写。

总结

老样子,上来先给出总结,来自于vue官网Class 与 Style 绑定 — Vue.js的变通

修改class属性总结<!-- 三目表达式判断,给的是类名--><div :class="isSquare?'square':'circular'"></div><div :class="[isChange?'blue':'red',isSquare?'square':'circular']"></div><!--布尔值--><div :class="{'square':isSquare,'square-color':isColor}"></div>修改style属性总结<div class="square" :style="{'background-color':isChange?'blue':'red','color':isChange?'white':'black'}">测试</div><div class="square" :style="{'height':data_height+'px','width':data_width+'px'}">测试</div>

总结只是让会的人勾起回忆的,如果刚接触,或者想看更多变式,请看下面详解。

特别注意: 注意属性必带的双引号""已经被使用了,所以双引号内表示字符串只能使用单引号' ',否则会出现匹配冲突。

修改class属性

1、利用JS表达式提供一个字符串

<!--HTML部分 --><div :class="isSquare?'square':'circular'"></div><!--isSquare真值为真,等同于--><div class="square"></div><!--isSquare真值为假,等同于--><div class="circular"></div>

这种方法用得比较多,你可以变化着JS表达式的内容,你会发生最后的行为和原生的操作没有太大的区别,易读性比较好。

如果需要多个,则变为数组(这种行为不太规范,也有点怪,推荐使用下面vue的官方方法)

<div :class="[isChange?'blue':'red',isSquare?'square':'circular']"></div>

2、vue提供的对象方法

Vue 通过style属性、class属性来动态修改CSS样式(vue style import)

通过真值判断是否应用这个class,注意尽量不要用对象键名的简写否则容易出错,观察也不便。如果键名中有短横线'-'则必须使用完整字符串形式, {'hello-class':'hello'}。

<!--HTML部分 --><div class="hello" :class="{'square':isSquare,'square-color':isColor}"></div><!--此时isSquare和isColor真值为真,等同于--><div class="hello square square-color"></div>//data部分data:{ isSquare:true, isColor:1}

还有一点,不要忘了对象的键值也是一个JS表达式,也就是说你可以这样写

<!--HTML部分 --><div class="hello" :class="{'square':isSquare="是方的"?1:false,'square-color':isColor}"></div><!--此时isSquare和isColor真值为真,等同于--><div class="hello square square-color"></div>//data部分data:{ isSquare:'是方的', isColor:1}

是不是让人眼前一黑

3、数组对象写法

其实还有一个数组里包对象的,但其实多个class名,一个对象就能完成的,数组里套对象,好像有点脱裤子放屁,看你们要怎么使用吧。

<!--HTML部分 --><div class="hello" :class="[{'square':isSquare},{'square-color':isColor}]"></div><!--此时isSquare和isColor真值为真,等同于--><div class="hello square square-color"></div>

JS表达式目的是提供一个值,也就是说你可以把这个值当成data里的变量,意味着你也可以整个对象/数组写在data里。

<!--HTML部分 --><div :class="divObject"></div>//data部分data:{ divObject:{ 'hello':true, 'isSquare':true }}

是不是特别简单

只要是JS表达式的变式后面就不再展示了,请自行变通。

修改style属性

1、对象的写法(最推荐、最舒服的)

<!--HTML部分 --><div class="square" :style="{'background-color':isChange?'blue':'red','color':isChange?'white':'black'}">测试</div>

附上vscode截图 因为csdn的代码块实在不怎么好看出来哪些是动态的变量

vscode截图

注意!CSS property 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,要用引号括起来) 

所以以下同等效果,同时三目运算符后的字符串也能换成data中的数据。

<!--HTML部分 --><div class="square" :style="{backgroundColor:isChange?color_active:color_disactive,color:isChange?textColor_active:textColor_disactive}">测试</div>

vscode截图

//date部分data:{ isChange:false, color_active:'blue', color_disactive:'red', textColor_active:'white', textColor_disactive:'black' }

2、数组对象写法

同样的,和class一样,有数组包对象的写法。

<!--HTML部分 --><div class="square" :style="[{'background-color':isChange?'blue':'red'},{'color':isChange?'blue','red'}]"></div>//date部分data:{ isChange:false, color_active:'blue', color_disactive:'red' }

当然,你一样可以利用JS表达式将对应的对象写在data里,这样属性多时候简洁一些,修改也可以直接修改对象里的属性。这样使用JS修改某个Style属性,区别于直接修改一整个class。

整活时间,超级变变变

看完上面,大家会发现,咦?style属性为什么没有直接提供一个字符串呢,当然有。

<div class="container" :style="isSquare?'background-color:'blue'':''"></div>

哒哒哒,写完,好了,匹配错误!记得我们开头说过的吗,引号匹配的问题。此时无论双引号还是单引号都不能表达这个blue的字符串。而且这也写指定样式很不方便。

那这怎么办呢,这时候,模板字符串就派出用场了。模板字符串最后会解析成字符串,所以这也能当做一个JS表达式。

<div class="container" :style="`background-color:${isChange?'pink':'orange'}`"></div><!-- 或者这样 --><div class="container" :style="'background-color:'+`${isChange?'pink':'orange'}`"></div>

模板字符串中的插值语法${}和vue标签里的插值语法{{}}一样也是一种JS表达式,也就是开始套娃了。

所以多个属性时,可以使用模板字符串,因为使用了对象,所以需要注意冒号的写法不能包括在字符串里。

<div class="container" :style="{'background-color':`${isChange?'yellow':'green'}`,'border-radius':`${isSquare?'50%':'0'}`}"></div>

以上的代码在某些语法检查中会提示错误导致下面的代码没有代码提示,不建议使用,但是不影响执行。

时间差不多,先分享到这,以后想起什么再继续写。手动码字不容易求个点赞,如有错,自己修改即可。

本文链接地址:https://www.jiuchutong.com/zhishi/310748.html 转载请保留说明!

上一篇:mysql中SQL语句的使用注意(mysql基本sql语句大全(基础用语篇))

下一篇:帝国CMS提示“您来自的链接不存在”怎么解决?(帝国cms使用手册)

  • 小规模纳税人没有税控盘怎么报税
  • 咨询合同按什么交印花税
  • 在建期间土地使用税可以资本化吗
  • 应收票据贴现的含义
  • 会计人士教你在Excel中如何计算年均增长率
  • 企业购买预付卡怎么做账
  • 发票的受票方是什么
  • 保险合同有啥用
  • 供应商不开票,还告我司不付款
  • 增值税扣税项目范围
  • 营业执照号码含义
  • 未分配利润可以转实收吗
  • 关联企业间融资方式
  • 收到住房补贴怎么做账
  • 发票开了收不到钱
  • 没有预付账款科目计入哪里
  • 含税房租
  • 营业外支出是否需要发票
  • 光纤布线有什么作用
  • 新公司成立前期费用
  • shstart.exe - shstart是什么进程 有什么用
  • 办理发票缴销需要提供的资料
  • 长期借款的业务处理
  • mac 查看当前用户
  • php目录操作
  • php extract函数
  • PHP:imagepsloadfont()的用法_GD库图像处理函数
  • 置换土地如何做账务处理
  • uml中的顺序图由什么组成
  • 利润分配怎样做分录
  • 内外参标定
  • 有没有网上学电脑的
  • 电子税务局没有开票业务
  • python random random
  • 个人税收收入退税政策
  • 发票验证不过去会怎么样
  • 新法典离职
  • 什么情况下需要异地预缴增值税
  • ie8 ie8i
  • 如何进行会计制度改革
  • 个税跨月更正申报怎么做
  • 劳务公司包工包料工程如何账务处理
  • 企业工会经费计提比例
  • 股权投资所得是什么
  • 股权和出资的关系
  • 制造费用怎么写
  • 城市配套费的账务处理
  • 资产负债表税务局能看到吗
  • 销项减进项税额
  • 固定资产一次性扣除账务处理
  • 收到收到
  • 小规模公司购买汽车如何抵税
  • 明细分类账表格
  • mysql5.5中文乱码解决
  • mysql密码忘记怎么办
  • ubuntu系统中安装微信步骤
  • u盘装系统win8
  • sybase ase数据库用户名密码
  • msoobe.exe是什么
  • shell数值比较
  • centos7.4升级7.5
  • win8windows设置在哪里
  • win7系统纯净版和旗舰版有什么区别
  • linux中的命令及含义
  • django orm sqlalchemy
  • java dao框架
  • opengl es4
  • JS 中document.write()的用法和清空的原因浅析
  • 如何用jquery
  • shell编程之循环语句for与while
  • unity图集
  • node发送邮箱
  • 安卓全局替换
  • js实现拖拽div的弹出框
  • 电子税务局申报密码怎么设置?
  • 珠宝加工费骗局
  • 账本遗失征管法处罚
  • 医疗机构执业许可证办理的条件
  • 在发票软件里开出发票第二天打印可以么?
  • 商品房开超市
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设