位置: 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使用手册)

  • 用博客做网站的排名(博客网站制作)

    用博客做网站的排名(博客网站制作)

  • 华为耳机丢了有定位吗(华为耳机丢了有定位吗freebuds4e)

    华为耳机丢了有定位吗(华为耳机丢了有定位吗freebuds4e)

  • 苹果11拍照全屏设置方法(苹果手机拍照全屏怎么设置)

    苹果11拍照全屏设置方法(苹果手机拍照全屏怎么设置)

  • 抖音视频怎么挣钱(抖音视频怎么挣得播放量怎么钱)

    抖音视频怎么挣钱(抖音视频怎么挣得播放量怎么钱)

  • 被拉黑怎么加对方好友(被拉黑如何加好友)

    被拉黑怎么加对方好友(被拉黑如何加好友)

  • 手机有话费不显示4g(手机有话费不显示怎么办)

    手机有话费不显示4g(手机有话费不显示怎么办)

  • 一加8上市时间(一加8上市价格)

    一加8上市时间(一加8上市价格)

  • 一个微信两个手机同时接收消息怎么弄(一个微信两个手机号怎样解除一个)

    一个微信两个手机同时接收消息怎么弄(一个微信两个手机号怎样解除一个)

  • icloud备份有什么用(icloud备份恢复)

    icloud备份有什么用(icloud备份恢复)

  • 微信卸载了重新安装聊天记录还在吗(微信卸载了重新安装怎么恢复聊天记录)

    微信卸载了重新安装聊天记录还在吗(微信卸载了重新安装怎么恢复聊天记录)

  • 拼多多助力次数上限怎么办(拼多多助力次数什么时候刷新)

    拼多多助力次数上限怎么办(拼多多助力次数什么时候刷新)

  • vivo手机型号在哪里看(vivo怎么看手机型号)

    vivo手机型号在哪里看(vivo怎么看手机型号)

  • 咸鱼上如何和卖家私聊(咸鱼上如何卖车)

    咸鱼上如何和卖家私聊(咸鱼上如何卖车)

  • 手机wps怎么删除多余页(手机wps怎么删除不需要的页)

    手机wps怎么删除多余页(手机wps怎么删除不需要的页)

  • 手机上怎么下载小说到mp4(手机上怎么下载歌曲到u盘)

    手机上怎么下载小说到mp4(手机上怎么下载歌曲到u盘)

  • 苹果xs多少w快充(iphonexs多少w快充)

    苹果xs多少w快充(iphonexs多少w快充)

  • airpods能同时连接两个手机吗

    airpods能同时连接两个手机吗

  • vivox27定时开关机在哪里(vivo手机定时开关机在哪里设置)

    vivox27定时开关机在哪里(vivo手机定时开关机在哪里设置)

  • 三星s10发热怎么解决(三星s10+发热)

    三星s10发热怎么解决(三星s10+发热)

  • 小米9防误触模式在哪里(小米9防误触模式在哪里设置)

    小米9防误触模式在哪里(小米9防误触模式在哪里设置)

  • OS X 系统下如何一键密码锁定屏幕想激活必须输入密码(如何安装os x)

    OS X 系统下如何一键密码锁定屏幕想激活必须输入密码(如何安装os x)

  • SSM前后端分离技术(ssm算前后端分离吗)

    SSM前后端分离技术(ssm算前后端分离吗)

  • 微信小程序最新获取头像和昵称的方法 直接用!(微信小程序最新咸鱼之王兑换)

    微信小程序最新获取头像和昵称的方法 直接用!(微信小程序最新咸鱼之王兑换)

  • 小规模忘了报税怎么办
  • 境外旅客购物离境退税条件
  • 单位当月未扣社保怎么处理分录?
  • 如何确定固定资产的原始价值
  • 财务章备案和不备份区别
  • 财务毛利率是毛利率吗
  • 去年的物业费今年缴,有罚款吗
  • 净利润为什么要减折旧
  • 贷款减值准备如何计提
  • 个体户没有税务登记证能注销营业执照吗
  • 房产预收款怎么记帐?
  • 消费税的应纳税额的计算
  • 结转无形资产账面价值
  • 电子商业承兑对方接收了还可以作废吗
  • 购买股票如果公司亏损
  • 企业所得税营业成本包括管理费用吗
  • 简易办法征收一般纳税人开票税率
  • 董事费如何计算个人所得税
  • 旧发票专用章如何处理
  • 许可费怎么进行分类
  • 融资租赁抵押车辆逾期收车
  • 调减管理费用如何调整本年利润
  • 个体户免税额度超出了
  • 企业未成立工会需要交工会经费吗
  • 负数发票是做相反分录还是红字相同分录
  • 金蝶标准版利润表季度怎么选
  • 买车预付款怎么记账
  • 企业所得税税率2.5% 5% 25%
  • 查找我的iphone怎么添加设备
  • deepin启动延时
  • 模具费用如何平摊到产品上
  • 反避税的意义
  • 股份制企业是什么
  • win10怎么看已安装的驱动
  • PHP:Memcached::getByKey()的用法_Memcached类
  • 增值税中非经营活动包括哪些
  • win7纯净版系统之家
  • 今夕七夕
  • php使用什么开发工具
  • 加计抵减和加计扣除是一样的吗
  • torch.cuda.is_available()
  • 车辆购置税是税前还是税后
  • 进项大于销项怎么做分录
  • 将织梦dedecms转换到wordpress
  • 门诊收费票据能重新打印吗
  • 个人所得税是可以全部退回吗
  • 代缴纳房产税
  • sqlserver2008安装步骤图文
  • access2000是什么
  • 预付房租计入长期待摊费用吗
  • 固定资产处置的净收入计入
  • 专利年费计入哪里
  • 销售退回所得税怎么做账
  • 合作研究开发项目的合同
  • 长期股权投资损益调整是什么意思
  • 减免的税金怎样做会计分录
  • 安保公司差额征税开具发票
  • 未确认融资费用计算公式
  • 税务局退还的三险是什么
  • 特定担保债权
  • 企业无偿为员工买社保
  • 预缴税款的会计处理
  • 以前年度多计提的社保费怎么冲回
  • 增值税发票抵扣多少个点
  • mysql查询分组后 组内数据
  • windows取消ctrl+alt+del
  • mac如何修改hosts登录Googledrive
  • explore.exe进程占用cpu99%
  • centos7手册
  • win7系统安装教程不用u盘
  • pdf在电脑上打开
  • cocos2dx官方教程
  • nodejs libuv
  • js数组entries
  • java教程
  • 增值税报表进项税和销项税都不填可以吗
  • 重庆市房产交易信息网
  • 潍坊昌邑售房信息
  • 手撕发票查询真伪平台
  • 电子专票在哪里接收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设