【vue回顾系列】17-:class和:style绑定的积累

前言

一开始学vue的时候，class和style的各种绑定方法总是记不住，所以之前开了这篇记录，现在回过头来看还是记录的很全滴。

class

基础写法

<!-- 单个绑定 -->
<p class="font">哇哈哈哈哈</p>

<!-- 多个绑定 -->
<p :class="['font', 'color']">哇哈哈哈哈</p>
<!-- 相当于class="font color" -->

条件绑定

单条件单类名

像一个对象形式的写法{ '类名': 满足条件 }

例子

html部分

<div class="btn" :class="{ disabled: btnUsed }">点击</div>

js部分

// 计算属性 简单点的逻辑直接写在{}里面即可
btnUsed() {
	if (xxx) {
   	  return false;
  	} else {
   	  return true;
	}
},

css部分

.btn{}
.btn.disabled{
	pointer-events: none;
}

当btnUsed为真时，相当于class="btn disabled"，所以css部分才生效。

可以多绑定几个条件类名：

<div class="btn" :class="{ disabled: btnUsed, 'text-red': isRed }">点击</div>
<div :class="['btn', 'text-red', { disabled: btnUsed }]">点击</div >

三目表达式

<p :class="isChange ? 'aaa' : 'bbb'">哇哈哈哈哈</p>
<div :class="['btn', { disabled: btnUsed }, sChange ? 'aaa' : 'bbb']">点击</div >

三目和{}多条件这两种方式根据业务需求选择。

结合计算属性

<div :class="change"></div>
<div :class="classObj"></div>

// 计算属性

// 返回的类名结果
change() {
  return this.isTrue  ? 'css样式名1' : (this.isTrue2 ? 'css样式名2' : 'css样式名3 css样式名4')
}
// 返回对象形式
classObj() {
  return {
	redColor: this.needRedColor,
	largeText: this.needLargeText
  }
}

还可以这样子写

<div :class="[`text-${changecolor}`, `text-${changesize}`]"></div>

// 在计算属性中
changecolor(){
   // 返回多种结果
}
changesize(){
   // 返回多种结果
}

给自定义组件绑定

给自定义组件绑定class时，会在子组件的根标签上显示。

---

style

用法和上面的class类似

基础用法

<div :style="{ width: w, height: h, backgroundColor: b }"></div>

data(){
	return: {
		w:...,
		h:...,
		b:...
	}
}

这种形式不推荐，代码写的太多，推荐用下面的方式

<div :style="[objStyle, objStyle2]"></div>

// 用data
data:{
    objStyle: {width:"200px",height: "200px",backgroundColor: "green"},
    objStyle2: {border:"5px solid red"}
}
// 也可以用计算属性

注意：类似background-color这种的属性要写成驼峰式的。

背景图片的引入

<!-- 本地 --->
<div :style="{background:`url(${require(`@img/home/logo.png`)})`}"></div>
<!-- 远程 image: "http....." --->
<div :style="{backgroundImage: `url(${image})`}"></div> // 

浏览器前缀

在vue3中看到的，vue2能不能这样用还没验证

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。–官方