一、需求

今天碰到同事问了一个问题，根据后端返还的字段名字来绑定该名字的独有颜色，例如：'提现成功' --- 绿色。'提现失败' --- 红色。

她是这样写的：:style="[{item.status == '提现成功' ? 'color:green': ''},{item.status == '提现失败' ? 'color:red': ''}]",很显然，样式没有生效。

二、问题

其实这就是Vue给我们的动态绑定写法格式问题，只不过我去翻了官网，并没有给出详细的类似于这种情况的书写方式，我也很久没有写过动态绑定，于是自己尝试了几种写法，奈何都没有生效，最后得出应该这么写：

动态绑定style-----:style="{color:true?'red':'',color:true?'blue':''}"

动态绑定class-----:class="[false ? 'redClass' : '',true ? 'blueClass' : '']"

遇到多种判断时，直接在该三元运算符后加上下一个判断条件(三元运算符)即可。

三、代码

解决~

关于Vue中动态绑定class和style的问题相关推荐

vue 中动态绑定class 和 style的方法
先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
Vue中动态绑定style样式写法
1. 动态绑定style样式注意点通过短横杠(-)连接的属性名都要转为驼峰形式,例:font-size要变成fontSize: 如果直接写样式属性的值,需要用引号引起来,例:fontSize: '1 ...
Vue 中动态绑定背景图片（三种情况）
1.服务端返回图片链接 <divclass="bg-img":style="{ backgroundImage: `url(${imgUrl})` }" ...
vue中的class和style在行内中用发有几种
1.class的对象绑定 //actived这个类是否加载取决于isActive这个变量的true还是false <div :class="{actived:isActive}&quo ...
Vue中动态绑定class样式
动态绑定class样式 1. 字符串写法语法: :class="className" 适用范围: 样式的类名不确定,需要动态指定. 举例说明: 点击一个元素更改其绑定的类名. & ...
swiper轮播在vue中动态绑定返回的数据图片显示不完整
因为swiper是异步请求的,可能在没有返回数据的时候就已经请求了,这时候我们可以让swiper在有数据的时候在显示转载于:https://www.cnblogs.com/yangjiansong/ ...
Vue或uniapp 中动态绑定背景图片（三种情况）
Vue 中动态绑定背景图片(三种情况)_MrQiuGH的博客-CSDN博客_vue 动态背景图
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...

关于Vue中动态绑定class和style的问题

一、需求

二、问题

三、代码

关于Vue中动态绑定class和style的问题相关推荐

最新文章

热门文章