最快捷迅速的做法
1. vue中可以 自定义class类,同时允许存在v-bind：class指令来进行书写样式，这两者并不冲突，可以并存。
2. 根据第一条，我们可以： class中书写必有的样式，然后用 :class搭配三元运算符进行动态样式判断
3. 这个方法其实就是组件中 data style 三元运算符的应用 好理解，易上手，极力推荐
<template>
<div>
<div class="grid-content" @mouseover="mouseOver" @mouseleave="mouseLeave">
<div
class="select_icon level_center"
:class="active == true ? 'select_a' : 'select_b'"
></div>
<div
class="select_char level_center"
:class="active == true ? 'select_charActive' : 'select_charNoactive'"
>
能力图谱
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: false,
};
},
created() {
},
methods: {
mouseOver() {
this.active = true;
},
mouseLeave() {
this.active = false;
},
},
computed: {
},
};
</script>
<style lang='less' scoped>
.grid-content {
//使用gutter使其自适应了,高度关掉
// width: 300px;
height: 300px;
background: #1b1f27;
border: 1px solid #6c93e3;
border-radius: 10px;
position: relative;
.select_icon {
width: 165px;
height: 144px;
position: absolute;
top: 48px;
transition: background 1s linear;
}
.select_char {
width: 259px;
height: 40px;
background: #272b35;
border-radius: 20px;
top: 239px;
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: 400;
text-align: center;
line-height: 40px;
transition: color 1s linear;
}
//变化后的样式
.select_charNoactive {
color: #8e9fa8;
}
.select_charActive {
color: #67fff8;
}
.select_a {
background: url("../assets/home/nenglitupu.png") no-repeat;
background-size: 100% 100%;
}
.select_b {
background: url("../assets/home/changjing.png") no-repeat;
background-size: 100% 100%;
}
}
</style>
对象语法
1.对象语法简单写一下，需要注意：对象里面多个样式的类，第二个需要用双引号括起来
2.对象语法其实就是：组件中style部分于data部分的结合
下面代码仅仅是在说明一个方式，代码并不具备操作性
<template>
<div>
<div class="grid-content">
//当 isActive 或者 hasError 变化时，class 列表将相应地更新。
//例如，如果 hasError 的值为 true，class 列表将变为 "select_icon select_char select_charNoactive select_b"。
<div
class="select_icon select_char"
:class="{ select_charNoactive: isActive, 'select_b': hasError }"
></div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
};
},
created() {
},
methods: {
mouseOver() {
this.active = true;
},
mouseLeave() {
this.active = false;
},
},
computed: {
},
};
</script>
<style lang='less' scoped>
.select_icon {
width: 165px;
height: 144px;
position: absolute;
top: 48px;
transition: background 1s linear;
}
.select_char {
width: 259px;
height: 40px;
background: #272b35;
border-radius: 20px;
top: 239px;
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: 400;
text-align: center;
line-height: 40px;
transition: color 1s linear;
}
//变化后的样式
.select_charNoactive {
color: #8e9fa8;
}
.select_charActive {
color: #67fff8;
}
.select_a {
background: url("../assets/home/nenglitupu.png") no-repeat;
background-size: 100% 100%;
}
.select_b {
background: url("../assets/home/changjing.png") no-repeat;
background-size: 100% 100%;
}
</style>
数组语法
下面代码仅仅是在说明一个方式，代码并不具备操作性
1.数组语法简单写一下
2.数组语法其实就是：组件中style部分于data部分的结合，但是非常恶心的是他并不是非常的直接，样式的类名
其实是写在数据中。(看代码吧)
3. 如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<template>
<div v-bind:class="[activeClass, errorClass]"></div>
</template>
<script>
export default {
data(){
return {
activeClass: 'active',
errorClass: 'text-danger'
}
},
created() {
},
methods: {
},
computed: {
}
}
</script>
<style lang='less' scoped>
.active {
text-align: center;
line-height: 40px;
transition: color 1s linear;
}
.text-danger {
text-align: center;
line-height: 40px;
transition: color 1s linear;
}
</style>
//最终渲染为 <div class="active text-danger"></div>