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

  • 账面成本包含增值税吗
  • 企业净利润怎么分配
  • 分支机构设立当年是否需要就地预缴企业所得税?
  • 税控盘网上申请解锁
  • 什么企业不用交社保
  • 债务担保属于或有资产吗
  • 清算报告与清算方案区别
  • 存货的领用
  • 出售无形资产和转让无形资产
  • 餐饮消费方式
  • 对公账户的理财收入计入什么科目
  • 其他应收款余额在贷方,怎么填资产负债表
  • 支付给其他公司费用怎么入账
  • 当月作废的采购发票已认证账务如何处理?
  • 应交城市维护建设税分录怎么做
  • 出口退税征税
  • 员工报销体检费,发票抬头开个人还是公司
  • 软件的维修性要求
  • 金税盘非征期汇总资料未报送
  • 淘宝电商会计交税怎么交?
  • 增值税进项税额是什么意思
  • 消费税的征税范围有哪些?
  • 收到培训机构的电话骚扰该怎么办?
  • 进口设备不需要交关税吗
  • 支付应付账款的会计科目
  • 法人转钱进公账可以吗
  • 单位为员工支付医疗费
  • 升级打装备的手游
  • 残保金必须交社保才能领吗
  • 筹建期间内发生的开办费属于什么费用
  • 公司换基本户需要多久
  • php数字转换大写
  • php版本常用的排版软件
  • 税务局返还税款账务处理
  • 股东的车辆保险费可在公司报销?
  • 多台电脑如何共享一台惠普打印机
  • 补缴增值税和滞纳税区别
  • 房产证办理流程图
  • 合法票据的有哪些
  • php无限级分类
  • php操作json文件
  • 为什么运输合同比租赁合同风险小
  • html编写
  • 劳保用品会计科目进什么科目
  • 去年的所得税计提多了怎么做分录
  • 内部结算属于什么科目类别
  • 帝国cms可以做商标吗
  • 以前年度多计提增值税
  • 合营企业和联营企业的概念
  • 融资租赁开什么发票
  • 跨区域缴纳个税相关规定
  • 房屋租赁合同印花税计税依据
  • 停产期间机器设备没提折旧,如何补提折旧
  • 买药费用应计入什么科目
  • 客运服务费发票计入什么科目
  • 合并注销和注销的区别
  • 缴纳的车辆购置税需要计提吗
  • mysql按时间查询
  • sql触发器语句
  • 流言:Win9或终止32位系统 加速64位平台
  • linux路由是干嘛的
  • win7宽带自动拨号设置
  • ubuntu搭建nginx服务器教程
  • 电脑开机后显示xp界面后一直是黑屏状态
  • centos7.2安装
  • win7强制关机后内存不足
  • [置顶] 纯享版奥义,手机迅雷搜:阿天动漫
  • opengl示例
  • angular中的$scope
  • javascript入门基础
  • javascript的
  • Please ensure that adb is correctly located at 'D:Androidandroid-sdkplatform-toolsadb.exe' and
  • nodejs实现登录
  • gradle手动安装
  • node-js
  • java中的多态性
  • 建筑工程资质挂靠合同
  • 广东电子税务局官网登录入口手机版
  • 12366重庆电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设