介绍

vuefor 循环中,经常会使用到动态添加类名或者样式的情况,实现给当前的选中的 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'
  1. 通过对象 的形式,
    代码如下:
<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>

效果如下:
在这里插入图片描述

  1. 通过数组 的形式,
    代码如下:
<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>

效果如下:
在这里插入图片描述

  1. 通过 三元判断的形式,进行添加
    代码如下:
<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里定义数据即可。

Logo

前往低代码交流专区

更多推荐