投票系统,实现效果:查看投票结果,投票的选项,文本和边框代码高亮显示,并且实现背景颜色占比与投票百分比一致(查看我的另一篇文章:http://t.csdn.cn/bZC2F) 如图所示: vue动态样式代码示例:
<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>
vue动态绑定参考资料:https://www.jb51.net/article/215294.htm
|