CSS切换不同样式,使用三元运算(vue)
来源:互联网 发布:windows垄断 编辑:程序博客网 时间:2024/06/15 18:40
在进行项目样式的时候,常常需要将不同按钮下的视图设置为不同的样式,如果反复写样式,会增加代码的重复量。这个时候就可以选择三元运算进行判断。有几种情况,如下:
1. 切换不同的类型。这里说的是,需要两种不同的样式类型,样式类型是完全不同的。这个可以这样使用,:class=“[leiXingFenZu ? $style.TitleTypeFont : $style.favFontNew]”,这里的判断条件就是leiXingFenZu,选择的内容就是TitleTypeFont和favFontNew
<div :class="[leiXingFenZu ?$style.TitleTypeFont :$style.favFontNew]">
{{$t('favorite.favoriteType')}}
</div>
2. 切换不同类型,但是新的类型是在旧的类型进行删除或者增加,这里使用的就是这样子的方式,:class=“{ searching: searchVal }”
,这个只是在需要修改的地方加入这个类就可以了,判断条件是searchVal。在style中直接改变就行了。
<el-collapse :value="expandedVal" :class="{searching: searchVal }">
<el-collapse-item :name="favGroup.name">
目前用到的是这两种,以后遇到别的方法会继续更新跟进。
阅读全文
0 0
- CSS切换不同样式,使用三元运算(vue)
- vue 三元表达式class、图片切换 (涉及计算属性)
- 三元运算符使用
- VUE 样式 CSS
- 实时切换CSS样式
- CSS样式切换技巧
- CSS样式切换技巧
- CSS 样式皮肤切换
- 切换css样式表
- css不同链接样式
- java三元运算符使用
- vue实现tab切换外加样式切换
- 【css】动态切换css样式
- Vue-cli单文件组件引入less、sass、css样式的不同方法
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- (六)、三元运算符
- vue.js样式切换小技巧
- (转)实时切换CSS样式
- hibernate-悲观锁、乐观锁-22
- Springmvc配置详解
- Leetcode 69. Sqrt(x)
- TP框架--利用自带分页处理自己数据的分页
- 特征提取算法之LoG
- CSS切换不同样式,使用三元运算(vue)
- 文件名太长-无法删除
- C# 线程:定时器的使用
- c++ 内存管理 1
- 写写文字,记录下最近,送给30岁的程序员我。
- [读书笔记]数据库-初识MongoDB
- Ubuntu 下安装Source Insight
- git基本原理详解
- 设计模式之命令模式