介绍
在vue的 for 循环中，经常会使用到动态添加类名或者样式的情况，实现给当前的选中的 div 添加不同的样式。
动态添加类名
提示： 所有动态添加的类名，放在表达式里都需要添加引号，进行包裹。
- 通过
对象的形式，使用花括号进行包裹。
使用方法：{'类名'： boolean}
第一个参数是需要添加的类名，第二个参数是一个boolean值。
优点是：可以通过逗号进行分割，即可添加多个类名
代码如下：
<template>
<div class="index">
<div v-for="(item,index) in state.list" :key="index" class="list-box">
<!-- 通过list数组里isActive属性，给p元素添加active类名；-->
<p :class="{'active': item.isActive">{
{ item.title }}</p>
<!-- 给p元素添加active类名；
通过list数组里isRed属性，给p元素添加red类名；
（这里添加了两个类名，通过逗号进行分隔的）-->
<p :class="{'active': item.isActive, 'red': item.isRed}">{
{ item.title }}</p>
</div>
<div></div>
</div>
</template>
<script setup>
import {
reactive} from 'vue';
const state = reactive({
list: [
{
id: 0,
title: '星期一',
isActive: true,
isRed: false,
},{
id: 1,
title: '星期二',
isActive: false,
isRed: true,
}
]
})
</script>
<style lang="less" scoped>
.list-box {
padding: 0 20px;
p {
margin-top: 20px;
}
.active {
font-size: 20px;
}
.red {
color: red;
}
}
</style>
实现效果如下：
- 通过
数组的形式，使用[]进行包裹。
使用方法：
使用方法：[判断成立的情况 ? '类名1' ： '类名2']
第一个参数是判断条件成立的表达式，第二个参数是表达式成立的情况下添加的类名，第三个表达式是情况不成立的情况下的类名。
代码如下：
<template>
<div class="index">
<div v-for="(item,index) in state.list" :key="index" class="list-box">
<!-- 通过list数组里isRed属性，为true时给p元素添加red类名的样式，否则不添加；
（这里添加了两个类名，通过逗号进行分隔的）
-->
<p :class="[item.isRed ? 'red' : '']">{
{ item.title }}</p>
<!-- 三元同时添加多个类名，使用空格进行隔开就行 如下所示 -->
<p :class="[item.isRed ? 'red blue' : '']">{
{ item.title }}</p>
</div>
<div></div>
</div>
</template>
<script setup>
import {
reactive} from 'vue';
const state = reactive({
list: [
{
id: 0,
title: '星期一',
isRed: false,
},{
id: 1,
title: '星期二',
isRed: true,
}
]
})
</script>
<style lang="less" scoped>
.list-box {
padding: 0 20px;
p {
margin-top: 20px;
}
.red {
color: red;
}
}
</style>
实现效果如下：
- 通过
方法的形式，在方法当中返回想要的类名。
使用方法：methods(),直接写方法名。
提示：逻辑多的时候建议用方法来添加类名，只有一个判断的时候建议用三元。
代码如下：
<template>
<div class="index">
<div v-for="(item,index) in state.list" :key="index" class="list-box">
<!-- 直接返回方法名，例如这里我的方法是 isred -->
<p :class="isRed(item)">{
{ item.title }}</p>
</div>
<div></div>
</div>
</template>
<script setup>
import {
reactive} from 'vue';
const state = reactive({
list: [
{
id: 0,
title: '星期一',
isRed: false,
},{
id: 1,
title: '星期二',
isRed: true,
}
]
})
// 在方法里写自己的判断，然后返回对应的类名；
const isRed = (item) => {
return item.isRed ? 'red' : ''
}
</script>
<style lang="less" scoped>
.list-box {
padding: 0 20px;
p {
margin-top: 20px;
}
.red {
color: red;
}
}
</style>
实现效果如下：
动态添加style样式
提示： 在vue中，动态添加 style 样式
- 所有的样式名必须是
驼峰写法；比如font-size必须写成fontSize; - 除了绑定的值以外，属性都得用引号括起来，比如
fontSize: '12px'
- 通过
对象的形式，
代码如下：
<template>
<div class="index">
<!-- 页面直接添加样式 -->
<div :style="{fontSize: '20px', color: 'red'}">哈哈哈</div>
<!-- vue 动态添加样式，通过数据的双向绑定 -->
<div :style="{fontSize: state.activeSize + 'px', color: state.activeColor}">嘿嘿嘿</div>
</div>
</template>
<script setup>
import {
reactive} from 'vue';
const state = reactive({
activeSize: 14,
activeColor: 'blue'
})
</script>
效果如下：
- 通过
数组的形式，
代码如下：
<template>
<div class="index">
<div :style="[state.sizeStyle,state.colorStyle]">哈哈哈</div></div>
</div>
</template>
<script setup>
import {
reactive} from 'vue';
const state = reactive({
sizeStyle: {
fontSize: '18px',
height: '40px',
lineHeight: '40px',
width: '80px',
textAlign: 'center'
},
colorStyle: {
color: 'red',
border: '1px solid green'
}
})
</script>
效果如下：
- 通过
三元判断的形式，进行添加
代码如下：
<template>
<div class="index">
<div :style="state.active ? 'color: red': ''">哈哈哈</div>
</div>
</template>
<script setup>
import {
reactive} from 'vue';
const state = reactive({
active: true,
})
</script>
<style>
.active {
color: red;
}
</style>
效果如下所示：
4. 通过 方法的形式，进行返回。
代码如下：
<template>
<div class="index">
<div :style="setStyle()">哈哈哈</div>
</div>
</template>
<script setup>
const setStyle = () => {
return 'background: red; height: 40px;line-height: 40px; width: 70px;color: #fff; text-align: center;'
}
</script>
效果如下：
总结
这里我用的是 vue3的一些写法，在vue2里，用法一样，在data里定义数据即可。
扫描二维码关注公众号，回复：
15234548 查看本文章
