vue动态控制样式

在vue项目开发中，我们经常会通过给元素动态的添加动态样式以实现选中的效果。通过动态的添加style和class达到动态更改样式的效果。

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

1. 第一种：简单的根据表达式去判断样式的显示，对象的形式。
2. 第二种：根据三目表达式来进行class的动态切换，不能写成对象的形式，不然会报错。
3. 第三种：相当于前两种的扩展，举例一个场景便于大家理解，一个多选项，我要点击的时候显示高亮的效果，那我们肯定需要拿到我们点击后的标识，将其放在一个数组中，然后去遍历的时候通过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>

        适用场景：解决手机页面场景的适配问题，比如：苹果手机有个下面的横杠占位，所以我们要添加对应的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>