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

一.根据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"},

    }

  }

}

原文地址:https://www.cnblogs.com/wd163/p/12114786.html

时间: 2024-10-11 10:55:23

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

div、span绑定内容改变事件

内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法,代码如下: 1 <meta charset="UTF-8"> 2 <script src="jquery.min.js"></script> 3 <span id="s"> 4 <span id=

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="jquery.js"></script> </head> <body> <p>我想去<span id="

Vue之动态绑定CSS样式

demo.html 1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml" 3 xmlns:v-on="http://www.w3.org/1999/xhtml"> 4 <head> 5 <met

Vue.js 动态绑定class

Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: 2.动态绑定class vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变

Vue 教程学习(一)&mdash;&mdash;转换为数字

原文引用https://www.dazhuanlan.com/2019/08/25/5d625bce2ce6f/ 为系统地学习Vue,参考了官方教程.我会将我所认为值得的部分记录下来. 这次我主要介绍处理表单章节的转换为数字部分,因为我想弄清楚转换数字后与之前相比究竟有什么区别. 教程中提到 比如说,对于"123",字面意思是表示数字,但实际类型却是String.虽然可以设置input的type属性,但text和number相比,只是限定了输入.比如input的type取值为numbe

如何取得/etc/hosts文件的权限对应的数字内容,如-rw-r--r--为644,要求使用命令取得644这样的数字。

如何取得/etc/hosts文件的权限对应的数字内容,如-rw-r--r--为644,要求使用命令取得644这样的数字. 解答: [[email protected] ~]# stat /etc/hosts File: `/etc/hosts' Size: 216                                         Blocks:8          IO Block: 4096   regular file Device: 803h/2051d           

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

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

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

ZipMarket程序仿自Envato旗下网站,对于想创建数字内容/素材交易平台的站长来说,ZipMarket是一个十分独特和极具创新的解决方案,用户在你的网站注册并购买或出售数字内容/素材作品时,你可以获得佣金:用户推广用户到你的网站购买或出售数字内容/素材时,引入用户的用户也可以获得佣金.实际上,ZipMarket是一套完美的数字内容类自由职业生态系统,功能不仅限于素材交易,除了模板/主题.文件.图片等素材交易,所有具备可下载性质的数字内容(包括视频.音频等)都完美适用. ZipMarket

如何取得/etc/hosts 文件的权限对应的数字内容,如-rw-r--r-- 为 644,要求使用命令取得 644 这样的数字

这道题考察的内容是怎么查看文件的权限,以及对权限对应数字的过滤 首先查看权限对应的数字内容使用stat命令来查看 [root@zhang ~]# stat /etc/hosts File: ‘/etc/hosts’ Size: 158 Blocks: 8 IO Block: 4096 regular fileDevice: 803h/2051d Inode: 16826902 Links: 1Access: (0644/-rw-r--r--) Uid: ( 0/ root) Gid: ( 0/