<div :style="{width:'4px',height: '24px',background: '#f7ce51'}"></div>
1. 三元运算符判断
<text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text> <script> export default { data() { return { state: true } } } </script>
2. 动态设置class
2.1 主要运用于：实现循环列表中点击时，相应的元素高亮；（默认首个元素高亮）
<template> <div class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)"> <div class="houseTitle" :class="{'active' : index === rightIndex}"> {{item.name}} </div> </div> </template> <script> export default { data() { return { rightIndex:0, houseList:[] }; }, methods:{ rightTap(index){ this.rightIndex = index } } } </script> <style lang="scss" scoped> .wrapper{ width: 118px; height: 60px; margin: 6px auto 0 auto; .houseTitle{ font-size: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .active{ color:#2a7ffa; background-color: pink; } } </style>
2.2 主要运用于：为特定数值设置相应样式；
<div :class="activeId === item.id?'activeStyle':'machineBar'" v-for="(item,index) in List" :key="index" @click="clickEvent"> <p>{{item.name}}</p> </div>
3. 方法判断
3.1 主要运用于：为不同的数据值设置相应的样式；
<template> <div v-for="(item,index) in houseList" :key="index"> <div :style="getStyle(item.status)">{{item.name}}</div> </div> </template> <script> export default { data(){ return{ houseList:[ { id:1, name:1, status:'a' },{ id:2, name:2, status:'b' },{ id:3, name:3, status:'c' } ] } }, methods:{ getStyle(e){ console.log('值',e) if(e === 'a'){ return { width:'60px', height:'60px', background:'yellow', margin: '10px auto' } }else if(e === 'b'){ return { width:'60px', height:'60px', background:'red', margin: '10px auto' } }else if(e === 'c'){ return { width:'60px', height:'60px', background:'pink', margin: '10px auto' } } } } } </script>
3.2 主要运用于：在元素多从事件下，显示相应的样式；
<template> <div class="homeWrap" :class="{'select': selected === 1,'click': clicked === 1}" @click="handleClick(1)" @mousedown="menuOnSelect(1)"> 主页 </div> </template> <script> export default { return { selected: 0, clicked: 0 } methods:{ menuOnSelect(value){ this.selected = value; }, handleClick(value){ this.selected = 0 this.clicked = value } } } </script> <style lang="stylus" scoped> .homeWrap.select background red .homeWrap.click background yellow </style>
4. 数组绑定
<div :class="[isActive,isSort]"></div> // 数组与三元运算符结合判断选择需要的class <div class="item" :class="[item.name? 'lg':'sm']"></div> <div class="item" :class="[item.age<18? 'gray':'']"></div> // 数组对象结合 <div :class="[{ active: isActive }, 'sort']"></div> data() { return{ isActive:'active', isSort:'sort' } } // css .active{ /*这里写需要设置的第一种样式*/ } .sort{ /*这里写需要设置的第二种样式*/ }
5. computed结合es6对象的计算属性名方法
<div :class="classObject"></div> export default { data(){ return{ isActive:true } }, computed:{ classObject() { return{ class_a:this.isActive, class_b:!this.isActive // 这里要结合自身项目情况修改填写 } } } } // css .class_a{ /*这里写需要设置的第一种样式*/ } .class_b{ /*这里写需要设置的第二种样式*/ }
