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的重复等).这样间接导致的后果就是.自己的页面样式好好的.在整合一起的时候.可能就会发生样式的 ...
随机推荐
- js观察者模式与Model
目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时 ...
- Flex性能调优相关的一些总结
1.Performace包含4点:(1)Latency反应时间(2)Scalability:可伸缩性(3)Reliablity:稳定性(4)Availability:可用性2.运行时生命周期:Flex ...
- I帧/P帧/B帧---术语解释
视频压缩中,每帧代表一幅静止的图像.而在实际压缩时,会采取各种算法减少数据的容量,其中IPB就是最常见的. 简单地说,I帧是关键帧,属于帧内压缩.就是和AVI的压缩是一样的. P是向前搜索的意思.B ...
- 转载:深入探讨 Java 类加载器
转载地址 : http://www.ibm.com/developerworks/cn/java/j-lo-classloader/ 深入探讨 Java 类加载器 类加载器(class loader) ...
- CSS 文件的4种引入方式
(1)链接式 : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css (用得比较多) : < ...
- Memcached在windows下的安装和使用
1.下载memcached安装文件及c#开发所需的dll 2.解压<memcached-1.2.6-win32-bin.zip>,并cmd,定位到解压目录. 3.安装服务:输入命令 mem ...
- Hadoop权威指南:通过distcp并行复制
Hadoop权威指南:通过distcp并行复制 distcp是一个分布式复制程序,改程序可以从Hadoop文件系统间复制大量数据,也可以将大量的数据复制到Hadoop中 distcp的典型应用是在两个 ...
- WdatePicker 日历控件使用方法+基本常用方法
WdatePicker 日历控件使用方法+基本常用方法,记录一下. 很好的文章. 网上转来的. 1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户 ...
- IP数据报格式 及路由转发算法
ip数据报分首部和数据两部分组成: 首部分为固定部分和可变部分 版本--占 4 位,指 IP 协议的版本 目前的 IP 协议版本号为 4 (即 IPv4) 首部长度--占 4 位,可表示的最大数值 是 ...
- AOP的简单练习
---恢复内容开始--- 1.AOP的主要作用及概念简介 AOP最大的用处在于事务处理上,业务层在项目中主要负责以下的操作: ·调用数据层进行处理: ·进行事务的处理: ·关闭数据库的连接操作: 但在 ...