Vue中Class与Style如何动态绑定
2024-10-06 12:32:50
Class 可以通过对象语法和数组语法进行动态绑定:
- 对象语法:
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: {
isActive: true,
hasError: false
}
- 数组语法:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
Style 也可以通过对象语法和数组语法进行动态绑定:
- 对象语法:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
- 数组语法:
<div v-bind:style="[styleColor, styleSize]"></div>
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
- 定义变量法:
通过判断一个条件去改变样式在项目中会经常遇到,此时我们可以适应给想要绑定的class定义一个变量进行动态切换class。
<div class=“className” :class={newclass : variable }>
我们可以将这个variable 在我们的data里面设置成false(默认不显示)
data () {
variable :false
}
之后给newclass 编写我们想要动态变动的样式
.className{
color: red;
}
.newclass {
color: black
}
现在是因为newclass 是定义的变量为Flase所以样式为className定义的内容
在我们js内容部分:
if(条件){
this.variable =true
}
即可通过条件来动态的切换样式。
最新文章
- 谢欣伦 - OpenDev原创例程 - 网络摄像机WebCamera
- json,pickle
- CSS常用样式(一)
- php7安装及配置
- preg_match_all
- V4L2应用程序框架--一【转】
- 7件你不知道但可以用CSS做的事
- A在SP.NET跨页多选
- poj2236无线网络
- iphone手机中对于html和css的一些特殊处理
- 201521123011 《Java程序设计》第8周学习总结
- 《java.util.concurrent 包源码阅读》24 Fork/Join框架之Work-Stealing
- Django----->;Ajax
- java字符串替换的问题
- 【Java并发编程】Callable、Future和FutureTask的实现
- Haxe:东游记(上)part1:intro
- Silverlight网页打开后马上崩溃,“白屏”,而且毫无提示
- 【C#】 使用Gsof.Native 动态调用 C动态库
- RocketMQ介绍与云服务器安装
- (6)time&;datetime(时间模块)
热门文章
- LayUI 上传IE11上传格式错误之后, layer.load(1)的动画一直在,没有关闭(仅限IE11)
- java-ztest测试报告的搭建,python-BeautifulReport
- MySQL在Linux系统环境的安装和无主机登录配置
- eclipse配置workspace背景颜色
- mysql创建数据库指定字符集和校对规则
- jquery 取得select选中的值
- C语言I博客作业02
- jQuery常用方法(四)-选择器
- 只要听说过电脑的人都能看懂的网上pdf全书获取项目
- SUSE CaaS Platform 4 - 使用 Ceph RBD 作为持久存储(动态)