一、动态添加class名

主要列举了三种方法，欢迎补充，

第一种：简单的根据表达式去判断样式的显示，对象的形式。
第二种：根据三目表达式来进行class的动态切换，不能写成对象的形式，不然会报错。
第三种：相当于前两种的扩展，举例一个场景便于大家理解，一个多选项，我要点击的时候显示高亮的效果，那我们肯定需要拿到我们点击后的标识，将其放在一个数组中，然后去遍历的时候通过find方法判断数组中是否以及有这个值了，有的话进行样式的添加。欢迎沟通哈，可能举例不太明了

<template>
  <div class="home">
    <!-- 写法一：对象形式，用于指定单个样式是否切换-->
    <!-- <div :class="{select:num>=10}">动态样式切换</div> -->
    <!-- 写法二：用于指定多个样式切换 -->
    <!-- <div :class="[num>=10?'select':'noselect']" >动态样式切换</div> -->
    <!-- 写法三：复杂化的写法 -->
    <!-- <div :class="{select:arr.filter(item=>item).length>5}">动态样式切换</div> -->
    <!-- <div :class="[arr.find(item=>item===4)?'select':'noselect']" >动态样式切换</div> -->
    <div>动态样式切换</div>
    <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
  <h3>实现当num大于10时头部问题变成红色</h3>
  
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      num:1,
      arr:[1,2,3,4,5,6]
    }
  }
}
</script>
<style>
  button{
    padding: 5px;
    background: #f5f5f5;
    margin:10px ;
}
.select{
  color: red;
}
.noselect{
  color: blue;
}
</style>

二、动态更改style样式

适用场景：解决手机页面场景的适配问题，比如：苹果手机有个下面的横杠占位，所以我们要添加对应的margin（苹果手机最底部元素添加padding不生效）

<template>
  <div class="home">
    <!-- 动态设置style -->
    <div :style="{color:num>=10?'red':'blue'}">动态样式切换</div>
    <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
  <h3>实现当num大于10时头部问题变成红色</h3>
  
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      num:1,
      arr:[1,2,3,4,5,6]
    }
  }
}
</script>
<style>
  button{
    padding: 5px;
    background: #f5f5f5;
    margin:10px ;
}
.select{
  color: red;
}
.noselect{
  color: blue;
}
</style>

声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

技术文章