vue动态样式绑定

投票系统，实现效果：查看投票结果，投票的选项，文本和边框代码高亮显示，并且实现背景颜色占比与投票百分比一致（查看我的另一篇文章：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