Vue实现动态样式的多种方法汇总

<text :style='{color:state?’#ff9933’:’#ff0000’}'>hello world </text><script>export default {data() {return {state: true}}}</script>2. 动态设置class

2.1 主要运用于：实现循环列表中点击时，相应的元素高亮；（默认首个元素高亮）

<template><div v-for='(item,index) in houseList' :key='index' @click='rightTap(index)'><div :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 : 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 :@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.name? ’lg’:’sm’]'></div><div :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实现动态样式的资料请关注好吧啦网其它相关文章！