vue关于class和样式的使用
这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。
不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
下面就介绍这几种绑定方式的使用:
1.对象语法:
我们可以传给v-bind:class一个对象,以动态的切换class。注意:v-bind:class指令可以与普通的class特性共存:
<div class="mySelf" v-bind:class="{'class-a':isA,'class-b':isB}"></div> data:{
isA:true,
isB:false
}
此时渲染:
<div class="mySelf class-a"></div>
通过控制isA和isB的变化来控制class的显示和隐藏
换种思考方式:我们可以把class直接赋值一个对象
<div class="mySelf" v-bind:class="classObject"></div> data:{
classObject:{
'class-a':true,
'class-b':false
}
}
我们也可以在这里绑定一个返回对象的一个计算属性,所以这里的用法非常强大!。
2.数组语法:
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表
<div v-bind:class="[classA,classB]"></div> data: {
classA: 'class-a',
classB: 'class-b'
}
此时渲染:
<div v-bind:class="[classA,classB]">
data: {
classA: 'class-a',
classB: 'class-b',
isB:true
}
如果想根据条件切换列表的class,可以用三元表达式
<div v-bind:class="[classA,isB?classB:'']"></div>
可以控制isB来调节classB的显隐
不过,当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中,可以在数组语法中使用对象语法:
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
3.绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case)
<div v-bind:style="{color:bgColor,fontSize:fontSize+ 'px'}"></div> data:{
bgColor:'white',
fontSize: 16
}
既然可以这么写,那么也就可以写成对象模式,这样会更清晰
<div v-bind:style="styleObject"></div> data:{
styleObject:{
color:'white',
fontSize:'16px'
}
}
同样的,对象语法也可以结合返回对象的计算属性使用
这就是所总结样式用法,希望于大家共同成长吧!
vue关于class和样式的使用的更多相关文章
- vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- 在vue组件的stylus样式总 取消search类型的input按钮中默认样式
在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...
- vue 项目不显示样式 排版错乱
vue中的css 样式都在index.html中 看这里是否有导入css
- 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
- 第七十三篇:解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
- Vue学习之--------Scoped样式(2022/8/1)
1.场景 一个页面开发团队进行页面的开发设计.无可避免的会发生样式选择器命名的重复(id的重复.class的重复等).这样间接导致的后果就是.自己的页面样式好好的.在整合一起的时候.可能就会发生样式的 ...
随机推荐
- Java线程:锁
一.锁的原理 Java中每个对象都有一个内置锁,当程序运行到非静态的synchronized同步方法上时,自动获得与正在执行的代码类的当前实例(this实例)有关的锁.获得一个对象的锁也称为获取锁.锁 ...
- JSP EL表达式 获得 request的GET/POST方法
JSP EL表达式 获得 request的GET/POST方法: 不在requestScopse中: <p>得到request的方法</p> <p>pageCont ...
- 报错找不到jquery-1.10.2.min.map解决办法
http://fruithardcandy.iteye.com/blog/1941452
- 开源第三方登录组件OAuthLogin2.0 支持QQ,阿里巴巴,淘宝,京东,蘑菇街,有赞等平台
Nuget地址:https://www.nuget.org/packages/OAuthLogin2.0/ 项目结构说明: AuthorizationProviders文件夹下主要存放内置的授权平台. ...
- SQLSERVER如何导入数据保持ID不变(ID为自增主键)
使用SQL SERVER最操蛋的就是导入数据,以前用企业管理器直接导数据,导一次骂N次娘,在骂了微软无数次娘之后总结了一个方法揍合着还算受用. 其核心要点就是要将数据结构导入到目标数据库服务器上,再来 ...
- [TPYBoard-Micropython之会python就能做硬件 2] 利用micropython控制NOKIA 5110屏
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板 一块 2.DS3231 ...
- codeforces div2.C
C. New Year and Rating time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- 蓝桥网试题 java 基础练习 十六进制转八进制
- -------------------------------------------------------------------------------------------------- ...
- 制作jar文件
一.制作可运行jar文件 使用java的swing.awt制作了一个简单的界面交互模块.程序打成jar包后,能双击运行,制作过程: 1.eclipse →properties →Export,选择ja ...
- LinkedList底层实现,及其数据结构实现。
LinkedList底层的实现基于双向表 prev data next next指向下一个node的地址.prev指向上一个node. 这里的代码是LinkedList类的源码. private st ...