样式判断-动态添加类名

动态添加类名
提示： 所有动态添加的类名，放在表达式里都需要添加引号，进行包裹。

1.通过 对象 的形式，使用花括号进行包裹。

使用方法：{'类名'： 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>

2.通过 数组 的形式，使用 []进行包裹。

使用方法：
使用方法：[判断成立的情况 ? '类名1' ： '类名2']

第一个参数是判断条件成立的表达式，第二个参数是表达式成立的情况下添加的类名，第三个表达式是情况不成立的情况下的类名。
代码如下：

<p :class="[item.isRed ? 'red' : '']">{{ item.title }}</p>

3.通过 方法 的形式，在方法当中返回想要的类名。

使用方法：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>

// 在方法里写自己的判断，然后返回对应的类名；
const isRed = (item) => {
  return item.isRed ? 'red' : ''
}

三元

:class="[grid==true?'gridbgc':'']"

4.动态添加style样式

在vue中，动态添加 style 样式

所有的样式名必须是 驼峰写法；比如 font-size必须写成 fontSize;
除了绑定的值以外，属性都得用引号括起来，比如 fontSize: '12px'

1）通过对象 的形式

<i :style="{'color':isBling?'red':'white'}" @click=""></i>

<div style="color:{if content == '' then 'gray' else 'black'};"></div>

<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>

2）通过数组 的形式

<div :style="[state.sizeStyle,state.colorStyle]">123</div>

const state = reactive({
 sizeStyle: {
    fontSize: '18px',
    height: '40px',
    lineHeight: '40px',
    width: '80px',
    textAlign: 'center'
  },
  colorStyle: {
    color: 'red',
    border: '1px solid green'
  }
})

3）通过三元判断 的形式

<div :style="item.active ? 'color: red': ''">哈哈哈</div>

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>