VUE中如何动态绑定类名和样式
作者:A7Feather 发布时间:2024-04-26 17:41:35
标签:VUE,动态绑定,类名,样式
VUE动态绑定类名和样式
1、使用v-bind属性绑定class和style属性
2、动态类名两种方式:
对象形式:给对象属性赋boolean类型值
数组配合三元运算符,通过改变条件的真假实现类名的添加和删除
<template>
<div>
<div :class="classObj">动态绑定对象</div>
<div :class="['namebox', activeStatus ? 'activeNamebox' : '']">
动态绑定数组
</div>
</div>
</template>
<script>
export default {
data() {
return {
classObj: {
namebox: true,
activeNamebox: false
},
activeStatus: false
}
}
}
</script>
<style>
.namebox {
color: #777;
}
.activeNamebox {
background-color: aquamarine;
}
</style>
3、动态样式的两种方式
对象形式
数组(包含样式对象)形式:可以同时添加多个样式对象
<template>
<div>
<div :style="styleObj1">对象形式</div>
<div :style="[styleObj1, styleObj2]">数组形式</div>
</div>
</template>
<script>
export default {
data() {
return {
styleObj1: {
color: '#eee'
},
styleObj2: {
textAlign: center
}
}
}
}
</script>
<style></style>
动态绑定样式——动态绑定style写法 & 动态class写法
1、动态绑定style写法
注意:
凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff
1.1、对象
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>
1.2、数组
<div :style="[baseStyles, overridingStyles]"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>
1.3、三元运算符
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>
<div :style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>
<!-- 写法一 -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div>
<!-- 写法二 -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>
<!-- 写法三 -->
<div :style="{border:( nameId ===item.id ?'2px solid #4C78FF': 'red')}"></div>
1.4、绑定data对象
<div :style="styleObject"></div>
<script>
data() {
return{
styleObject: {
color: 'red',
fontSize: '14px'
}
}
}
</scrip>
2、动态class写法
2.1、对象方法
<!-- isActive —— true/false -->
<div :class="{ 'active': isActive }">{{name}}</div>
2.2、判断是否绑定一个active
<div :class="{'active' : isActive == -2}" >{{name}}</div>
<div :class="{'active' : isActive == item.nameId}" >{{item.name}}</div>
2.3、绑定并判断多个
2.31、第一种:用逗号隔开
<div :class="{ 'active': isActive, 'user': isUser }"></div>
2.32、放在data里面
<div :class="classObject">{{name}}</div>
<script>
data() {
return {
classObject:{ active: true, user:false }
}
}
</script>
2.33、使用computed属性
<div :class="classObject">{{name}}</div>
<script>
data() {
return {
isActive: true,
isUser: false
}
},
computed: {
classObject: function () {
return {
active: this.isActive,
user:this.isUser
}
}
}
</script>
2.4、数组方法
2.41、单纯数组
<div :class="[isActive,isUser]">{{name}}</div>
<script>
data() {
return{
isActive:'active',
isUser:'user'
}
}
</script>
2.42、数组与三元运算符结合判断选择需要的class
注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染
:class="[isActive?‘active':'']"
或者
:class="[isActive1?‘active':'']"
或者
:class="[isActiveindex?‘active':'']"
或者
:class="[isActive==index?‘active':‘otherActiveClass']"
2.43、数组对象结合动态判断
//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号
:class="[{ active: isActive }, ‘sort']"
或者
:class="[{ active: isActive1 }, ‘sort']"
或者
:class="[{ active: isActiveindex }, ‘sort']"
来源:https://blog.csdn.net/m0_61852712/article/details/127123795
0
投稿
猜你喜欢
- 前言第一次处理视频素材可以手动用剪映来处理,然后再用代码进行自动化处理,不然连朝哪个方向自动化处理可能都不知道那清楚处理流程之后,怎么用Py
- 一、介绍argparse 模块可以让人轻松编写用户友好的命令行接口。程序定义它需要的参数,然后 argparse 将弄清如何从 sys.ar
- [参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ][操作系统:Windows
- 1.需要导的包import pymysql2.# mysql连接信息(字典形式)db_config ={ 'host': &
- 1、除法相关在python3之前,print 13/4 #result=3然而在这之后,却变了!print(13 / 4) #r
- python 在传入字典参数到函数中时总是需要检查键是否齐全,每次手工写总是觉得太麻烦。所以还是自己写一个比较方便。#Check if th
- time模块1:概述时间表示的分类时间戳格式化的时间字符串结构化时间时间戳:时间戳表示的是从1970年1月1日整0点到目前秒的偏移量,数据类
- 之前一篇文章里提到了利用Cython来编译Python,这次来讲一下如何用Cython给Python写扩展库。两种语言混合编程,其中最重要的
- 前言plt.contour是python中用于画等高线的函数,这里介绍一下plt.contour的使用。使用示例import numpy a
- 本文实例总结了php处理json格式数据的方法。分享给大家供大家参考,具体如下:1.json简介:何为json?简 单地说,JSON 可以将
- 概述从前面的对Python基础知识方法介绍中,我们几乎是围绕Python内置方法进行探索实践,比如字符串、列表、字典等数据结构的内置方法,和
- getpixel函数是用来获取图像中某一点的像素的RGB颜色值,getpixel的参数是一个坐标点。对于图象的不同的模式,getpixel函
- 在搭建springmvc框架时,底层使用hibernate4.1.8,数据库使用mysql5.1,使用hibernate自动生成数据库表时,
- 处理excel表格的时候经常遇到合并单元格的情况,使用xlrd中的merged_cells的方法可以获取当前文档中的所有合并单元格的位置信息
- 请求地址var ( requestGetURLNoParams string = "http://httpbin.org/get&
- 跨平台的事件EventUtil对象 EventUtil: var EventUtil={ addEventHandler:function(
- server:#coding=utf-8from BaseHTTPServer import BaseHTTPRequestHandleri
- 一、什么是ttkbootstrap?官方文档 [较慢]:https://ttkbootstrap.readthedocs.io/en/lat
- 前言:前面我们提到了Python数据类型中的内置数值类型与字符串类型。今天学习一下Python的序列数据类型,要知道的是在Python中没有
- 训练模型时,我们并不是直接将图像送入模型,而是先将图像转换为tfrecord文件,再将tfrecord文件送入模型。为进一步理解tfreco