vue class属性样式:

 div,标签中 用class属性 class=" "        .a{ }


/* 水平对齐 */
display: flex;

/* 水平居右 */
text-align: right;

/* 垂直居中 */
margin: auto;

/* 背景颜色 */
background-color: gainsboro;

/* 背景图片 */
background: url('../assets/02.png');

/* 调整图片 填充 */
background-size: auto;
background-size: cover;
或者:background-size: 100%;
或尺寸设定:background-size: 800px 500px;


/* 调整大小 */
font-size: 30px;

/* 字体加粗 */
font-weight: bold;

/* margin div外 上边距 */
margin-top: 10px;

/* padding div内 下边距 主要用于下划线 */
padding-bottom: 20px;

/* 底部分界线 */
border-bottom: 1px darkgrey solid;

/* 外边距 两个参数 顶底和左右*/
margin: 15px;
/* 内边距 两个参数 顶底和左右 */
padding: 0 15px;

/* 顶底左右 */
top: 10px;
bottom:10px;
left: 10px;
right: 20px;

/* 颜色 */
color: cornflowerblue;


/* 属性1.位置 : 相对 */
position: relative;
/* 属性2.位置 : 绝对 */
position: absolute;
# 动态背景图

<div :style=&#
Vue中的class:class都是用于动态绑定class属性的指令,可以根据数据的变化来动态改变元素的class属性。 1. :class指令可以绑定一个对象,对象的属性名是class名称,属性值是一个布尔值,true表示添加该class,false表示移除该class。例如: ```html <div :class="{ active: isActive }"></div> ``` 当isActive为true时,该元素会添加active类;当isActive为false时,该元素会移除active类。 2. :class指令也可以绑定一个数组,数组的元素可以是字符串、对象或数组。例如: ```html <div :class="[activeClass, errorClass]"></div> ``` 其中activeClass和errorClass都是字符串,表示class名称。当activeClass和errorClass都存在时,该元素会同时添加这两个class。 ```html <div :class="[isActive ? activeClass : '', errorClass]"></div> ``` 数组元素也可以是对象,对象的属性名是class名称,属性值是一个布尔值或者一个返回布尔值的表达式。例如: ```html <div :class="[{'active': isActive}, {'text-danger': hasError && !isActive}]"></div> ``` 当isActive为true时,该元素会添加active类;当hasError为true且isActive为false时,该元素会添加text-danger类。 3. class属性可以直接绑定一个字符串,字符串中可以包含表达式。例如: ```html <div class="static" :class="[isActive ? activeClass : '', errorClass]" :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ``` 其中static是静态的class,不会随着数据的变化而改变;activeClass和errorClass是动态的class,会根据isActive和hasError的值来动态改变;:style指令可以绑定一个对象,对象的属性名是样式名称,属性值是样式值,可以是一个表达式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值