introduce
In the loopvue , it is often used to dynamically add class names or styles to add different styles to the currently selected one.fordiv
Dynamically add class names
Tip: All dynamically added class names need to be added 引号and wrapped in expressions.
- In the form
对象of , use curly braces for wrapping.
How to use:{'类名'： boolean}
The first parameter is the name of the class to be added, and the second parameter is abooleanvalue .
The advantage is:可以通过逗号进行分割，即可添加多个类名
the code is as follows:
<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>
The effect is as follows:
- In the form
数组of , use[]to wrap.
How to use:
How to use:[判断成立的情况 ? '类名1' ： '类名2']
The first parameter is the expression that judges the condition to be true, the second parameter is the class name added when the expression is true, and the third expression is the class name when the condition is not true.
code show as below:
<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>
The effect is as follows:
- In the form
方法of , return the desired class name in the method.
How to use:methods(), directly write the method name.
Tip: When there is a lot of logic, it is recommended to use methods to add class names, and when there is only one judgment, it is recommended to use ternary.
code show as below:
<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>
The effect is as follows:
Dynamically add style styles
Tip: In vuethe, dynamically add stylethe style
- All style names must be
驼峰写法; e.g.font-sizemust be written asfontSize; - Except for the bound value, properties must be enclosed in quotes, such as
fontSize: '12px'
- Through
对象the form,
the code is as follows:
<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>
The effect is as follows:
- Through
数组the form,
the code is as follows:
<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>
The effect is as follows:
三元判断Through the form, add
the code as follows:
<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>
The effect is as follows:
4. Return in the form 方法of .
code show as below:
<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>
The effect is as follows:
Summarize
Here I use some writing methods vue3of , vue2and the usage is the same in , datajust define the data in .