vue实现动态样式的方法有哪些？
发布时间：2022-02-22 13:12:40 所属栏目：语言 来源：互联网
导读：vue实现动态样式的方法有哪些？vue中我们想要实现动态样式的方法有很多，因此本文给大家分享几个vue实现动态样式实例供大家参考，对新手学习和理解vue实现动态样式有一定的帮助，接下来跟随小编来学习一下吧。 1. 三元运算符判断 text :style={color:state?#
|
vue实现动态样式的方法有哪些？vue中我们想要实现动态样式的方法有很多，因此本文给大家分享几个vue实现动态样式实例供大家参考，对新手学习和理解vue实现动态样式有一定的帮助，接下来跟随小编来学习一下吧。 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{ /*这里写需要设置的第二种样式*/ } 以上就是关于Vue实现动态样式的方法的介绍，有需要的朋友可以参考上述代码，希望对大家学习vue有帮助，想要了解更多请搜索群英网络以前的文章或继续浏览其他相关的文章。 （编辑：张家口站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
