您现在的位置是:首页 > 正文

vue动态样式绑定

2024-04-01 01:48:11阅读 1

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

网站文章

  • 深度学习图像处理目标检测图像分割计算机视觉 09--目标检测

    深度学习图像处理目标检测图像分割计算机视觉 09--目标检测

    深度学习图像处理目标检测图像分割计算机视觉 09--目标检测摘要一、任务二、代码三、文献四、毕设总结摘要本周计划完成目标检测的下半部分网络,运行一个yolo目标检测的代码。了解甲状腺评分的论文。一、任务二、代码三、文献四、毕设总结...

    2024-04-01 01:48:05
  • 剑指Offer JZ52 正则表达式匹配 C++实现

    题目描述请实现一个函数用来匹配包括'.'和'*'的正则表达式。模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次)。 在本题中,匹配是指字符串的所有字符匹配整个模式。...

    2024-04-01 01:47:57
  • asp.net中运用百度地图api获取客户端的经纬度的方法

    asp.net中运用百度地图api获取客户端的经纬度的方法

    使用到的百度地图api接口需要自己申请成为开发者,点击百度地图开放平台进去注册。在asp.net中:前台页面代码:<!doctype html><html><head runat="server"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" ...

    2024-04-01 01:47:31
  • ubuntu16.04离线安装mysql5.7.33

    由于一些原因,服务器不能联网,只能在一台能联网的机子上面下载相关软件,再将这台机子和服务器连接到一个局域网内,然后将下载好的软件传到服务器上。 有的软件可以很方便地安装。比如node和npm,但在安装...

    2024-04-01 01:47:24
  • session和cookie的区别

    session和cookie的区别

    cookie和session的区别

    2024-04-01 01:47:17
  • javaweb超级简单网上购物商城系统源码SSM框架结构

    javaweb超级简单网上购物商城系统源码SSM框架结构

    javaweb线上网上购物商城系统,采用ssm框架设计

    2024-04-01 01:46:51
  • 机器学习——实践

    机器学习——实践

    比如风控或者入侵检测,这两类任务都具有严重的数据不平衡问题,可以在算法学习的时候,为少类样本设置更高的学习权重,从而让算法更加专注于少类样本的分类情况,提高对少类样本分类的查全率,但是也会将很多多类样...

    2024-04-01 01:46:46
  • 配置中心ETCD搭建与简单使用 热门推荐

    1 ETCD配置 1.1 Ubuntu安装ETCD 以下配置均在Ubuntu16.04系统中。 (1)使用wget命令对ETCD进行安装 wget https://github.com/etcd-io...

    2024-04-01 01:46:38
  • QT connect使用简单介绍 最新发布

    QT connect使用简单介绍 最新发布

    QT connect 使用简单介绍

    2024-04-01 01:46:31
  • 吃豆人html代码原理,如何用HTML做一个吃豆人?

    吃豆人html代码原理,如何用HTML做一个吃豆人?

    首先做一个项目的先想如何去实现它。比如做一个吃豆人,如图:167b84dcbf0d3ed647b6b8c4abd75f92.jpg首先,需要分析这个吃豆人的组成部分。上半部分嘴,下半部分嘴,豆基本就三...

    2024-04-01 01:46:06