一.根据span数字内容改变数字本身样式(两种样式)
<template>
  //使用三目运算符,判断当span的val是否小于0给其不同的class名
  <span class="inOut" :class="abc.upgold<0?'inColor':'outColor'">得分:{{abc.upgold}}</span>
</template>
<style scoped>
.inColor{
  color: red!important
}
.outColor{
  color: #34ea34!important
}
</style>
二.根据span数字内容改变数字所在span背景色(多种样式)
<template>
  //将span的val放在listcolor数组中 
  <td  :style="{background:listcolor[item.rq[0]]}">主<br/>{{item.rq[0]}}</td>
</template>
export default{
  data(){
    return{
      //提前准备listcolor对象数组,规定渲染不同数据作为key值来选取不同的对象(样式)
      listcolor:{"1":"rgb(221, 62, 62)", "2":"rgb(254, 62, 62)","":"gray","-1":"#4acc6c","-2":"#696969"},
    }
  }
}
 

vue实现动态绑定class--(三目运算符)根据span数字内容改变其样式的更多相关文章

  1. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

  2. checkbox:click事件触发span元素内容改变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue之动态绑定CSS样式

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  4. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  5. Meta标签中的format-detection属性及含义让IPHONE的数字可以改变颜色

    format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta na ...

  6. jquery判断文本框输入的是非数字内容(交流QQ群:452892873)

    isNaN($(this).val())==false   输入的是数字, isNaN($(this).val())==true  输入的是非数字内容

  7. ZipMarket数字内容/素材交易网站源码项目

    ZipMarket程序仿自Envato旗下网站,对于想创建数字内容/素材交易平台的站长来说,ZipMarket是一个十分独特和极具创新的解决方案,用户在你的网站注册并购买或出售数字内容/素材作品时,你 ...

  8. chmod以数字形式改变文件权限

    Linux文件的三种身份和四种权限,三种身份分别为: u:文件的拥有者 g:文件所属的群组 o:其他用户 对于每个身份,又有四种权限,分别为: r:读取文件的权限(read) w:写入文件的权限(wr ...

  9. HMS Core助力宝宝巴士为全球开发者展现高品质儿童数字内容

    本文分享于HMS Core开发者论坛<宝宝巴士携HMS Core为全球家庭用户提供优质儿童数字内容>采访稿整理 宝宝巴士是国内有着十多年出海经验的开发者,其旗下有超过200多款儿童益智互动 ...

随机推荐

  1. 恒生UFX交易接口基本介绍

    https://zhidao.baidu.com/question/203296047903136445.html 1.恒生UFT和UFX有什么区别? UFT是一个极速交易系统,UFX是一个统一接入系 ...

  2. FTP和HTTP

    一.字面上来看 HTTP是Hyper Text Transfer Protocol,超文本传输协议: FTP是File Transfer Protocol,文件传输协议: 简单说HTTP是面向网页的, ...

  3. springBoot中的邮件发送

    1. 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  4. php魔术常量,_CLASS_,_METHOD_,_FUNCTION_

    _CLASS_: 返回当前类的类名 _METHOD_:返回当前类方法的方法名(并显示类的调用,类名::方法名) _FUNCTION_:返回当前函数的函数名 _FILE_:当前文件的绝对路径(包含_FI ...

  5. Microsoft SQL server Management Studio工具报错“应用程序的组件中发生了无法处理的异常”

    解决办法 打开目录: C:\Documents and Settings\Administrator\Application Data\Microsoft\Microsoft SQL Server\1 ...

  6. 利用salt-stack 对多台分布式应用进行简单部署jar包项目:

    /appsystems/JQM-SERVER/shell/stopServer.sh:                                         ----用脚本停止应用 cmd. ...

  7. Ubuntu编译protobuf

    个人博客地址:http://www.bearoom.xyz/2019/08/24/ubunt-protobuf/ 因为编译了tensorflow C++的版本,然后提示protobuf的版本不对应引起 ...

  8. 21. docker 数据通讯环境准备

    一 . 环境搭建 1.编写 Vagrantfile 并创建虚拟机 并虚拟机host绑定外部 192.168.205.10:8888 # -*- mode: ruby -*- # vi: set ft= ...

  9. h5-伪元素-before和after

    做一个门票或者邮票:效果图 1.html就是两个div 2.具体css代码 <style> /*左侧长方体基本样式*/ div:nth-of-type(1){ width: 300px; ...

  10. leetcode 690.员工的重要性

    题目: 给定一个保存员工信息的数据结构,它包含了员工唯一的id,重要度 和 直系下属的id. 比如,员工1是员工2的领导,员工2是员工3的领导.他们相应的重要度为15, 10, 5.那么员工1的数据结 ...