文档章节

Vue中Class与Style如何动态绑定

o
 osc_wws45aot
发布于 2019/08/20 15:32
字数 283
阅读 13
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

}

即可通过条件来动态的切换样式。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

四面字节跳动(高级开发岗):分布式+中间件+TCP+JVM+Hashmap+ThreadLocal

字节跳动的面试官都挺好,面试的内容是我面试那么多家以来最全面的,问题也没有特别刁钻,都比较符合工作场景。 项目很重要,项目是敲门砖也是面试的大头,如果我没有简历上的两个项目的话,...

IT-哆哆
3分钟前
0
0
直播回顾

因业务需要,接触了一下直播,作为一个小白,在此做个回顾。 需求:在我们自己的APP上直播带货 调研:阿里云视频直播、腾讯云标准直播 简单地来说,直播就是把主播端采集的视频传送给用户端。...

osc_nk8pyo7o
3分钟前
0
0
神经网络中的激活函数

作者|Renu Khandelwal 编译|VK 来源|Medium 什么是神经网络激活函数? 激活函数有助于决定我们是否需要激活神经元。如果我们需要发射一个神经元那么信号的强度是多少。 激活函数是神经元通过神...

osc_993tr4xp
5分钟前
0
0
重磅!YOLOv4阅读笔记(附思维导图和论文译文)!

今天刷看到了YOLOv4之时,有点激动和兴奋,等了很久的YOLOv4,你终究还是出现了 论文地址:https://arxiv.org/pdf/2004.10934.pdf GitHub地址:https://github.com/AlexeyAB/darknet 觉得作者...

osc_zwv9uj8l
6分钟前
0
0
2.链表

点击使用幕布网页版查看(含思维导图) 链表(单链表)是一种通过指针将一组零散的内存块串联起来的数据结构,每个链表的结点除了存储的数据之外,还需要记录链上的下一个节点的地址 链表的插...

osc_73pstnki
7分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部