html代码
  1. <div class="top_precent">
  2. <span :class="{arrow:numPrecent<0}"></span>
  3. </div>
 
css代码
 
  1. span{
  2. font-size: 20px;
  3. line-height: 50px;
  4. }
  5. span:before{
  6. content:'↑ ';
  7. color: red;
  8. //↓↑
  9. }
  10. .arrow:before{
  11. content: '↓';
  12. color:rgb(0,255,173);
  13. }

效果图

vue项目动态控制数据变动时箭头样式的更多相关文章

  1. 解决未安装unit测试和jest的Vue项目运行karma start时的错误

    一.起因 在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试.但是此项目在利用 vue-cli ...

  2. VUE项目二级菜单刷新时404 nginx

    原因:vue项目的路径时虚拟路径,并不存在,所以用nginx去请求请求不到,所以vue项目做了两部调整: 1.所有的请求后端接口地址前端写死 2.nginx里把所有的接口转发后端删掉,并添加以下内容 ...

  3. vue项目中连接MySQL时，报错ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password:YES)

    一.前言 我们前端很多时候在写vue项目的时候,会把后端的数据拿到本地来跑,在连接MySQL数据库的时候,可能出现一些问题,如: ER_ACCESS_DENIED_ERROR: Access deni ...

  4. vue项目中引入element-ui时，如何更改主题色

    在我们做项目时,我们经常会遇到切换主题色的功能,下面我们就来说一下通过颜色选择器我们就能改变项目的主题颜色 代码如下: 颜色选择器所在组件: top-theme.vue内容如下: <templa ...

  5. Vue项目本地run与build后样式不同，build后样式不生效

    今天老大,让我改一个按钮的样式,就是鼠标放在按钮上,改变字体的颜色.觉得小意思啦,不就是:hover吗? 啊...什么鬼?本地run可以,但是build之后并没有生效!!! 我们项目引入的第三方UI库 ...

  6. 在vue项目中引用element-ui时 让el-input 获取焦点的方法

    在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...

  7. vue项目在git commit时，使用eslint检测

    用vue-cli3创建新项目可以自定义配置,选择eslint,所以eslint不需要配置, 项目根目录下面生成一个 .eslintrc.js文件,里面可以自定义配置eslint规则 现在在开发的时候, ...

  8. Vue项目运行或打包时，频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

    前端使用基于vue的Nuxt框架,但是随着项目功能增多,项目变大,频繁出现此种情况,原因是项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 解决方案 1.全局安装increase-memor ...

  9. vue项目打包之后原本好的样式变得不好了的原因分析

    这个主要是打包的过程将所有的css文件进行归类压缩,导致原先其他文件里的样式对当前的产生了影响,应该有同样的类名了.怎么改?要么改类名,要么用scope,scss的写法.

随机推荐

  1. Service Worker初体验

    http://web.jobbole.com/84792/ http://imweb.io/topic/56592b8a823633e31839fc01

  2. CRM 2016 IFrame_A嵌入 EXT.net 页面 a.aspx，刷新另一IFrame_B嵌入 b.aspx gird.

    说白了就是一个IFrame页面,执行另一IFrame页面的函数.  a.aspx JS: parent.Xrm.Page.getControl("IFRAME_B").getObj ...

  3. bootstrap样式

    图片: <img src="w.jpg" alt="" class="img-rounded"><img src=&quo ...

  4. Linux图形操作与命令行

    一.执行命令 通过shell 在哪里输入: 1. 字符界面 2. 终端模拟器程序,如gnome-terminal.konsole (最早的linux是没有图形界面的,只有tty,也就是字符终端.当有了 ...

  5. delphi2010 域名转换IP

    uses winsock; function GetHostIp_wwwdelphitopcom(HostName: string): string; type   tAddr = array[0.. ...

  6. 使用命名管道的OVERLAPPED方式实现非阻塞模式编程 .

    命令管道是进程间通讯的一种常用方式,对于命令管道的介绍可以参考别的资料和书籍,这里推荐一个<VC++下命名管道编程的原理及实现>这篇博文,写得比较清楚.但是都是介绍了阻塞模式的编程,我这里 ...

  7. CS229 3.用Normal Equation拟合Liner Regression模型

    继续考虑Liner Regression的问题,把它写成如下的矩阵形式,然后即可得到θ的Normal Equation. Normal Equation: θ=(XTX)-1XTy 当X可逆时,(XT ...

  8. rpm和yum的区别

    rpm 只能安装已经下载到本地机器上的rpm 包, yum能在线下载并安装rpm包,能更新系统,且还能自动处理包与包之间的依赖问题,这个是rpm 工具所不具备的.

  9. 【eclipse jar包】在编写java代码时，为方便编程，常常会引用别人已经实现的方法，通常会封装成jar包，我们在编写时，只需引入到Eclipse中即可。

    Eclipse中导入外部jar包 在编写java代码时,为方便编程,常常会引用别人已经实现的方法,通常会封装成jar包,我们在编写时,只需引入到Eclipse中即可. 工具/原料 Eclipse 需要 ...

  10. 微信小程序开发warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance

    用微信官方的模板发现突然报了这个warning,检查原因: 官方解释: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <i ...