vue实现条件判断动态绑定样式的方法


Posted in Javascript onSeptember 29, 2018

在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示:

vue实现条件判断动态绑定样式的方法

当值为“是”时,显示绿色的标签,当值为“否”时,显示为灰色的标签。

标签的样式分别为:

<el-tag type="success">绿色标签</el-tag>
<el-tag type="info">灰色标签</el-tag>

关键在于type的样式部分,我们利用vue的样式绑定,结合三元表达式使用

:type="{条件} ? {如果为真} : {否则}"

在代码中:

<el-tag size="medium" :type="scope.row.is_multiple === '否' ? 'info' : 'success'" >{{
 scope.row.is_multiple }}
</el-tag>

这样效果即可出来了。

以上这篇vue实现条件判断动态绑定样式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 面向对象之神奇的prototype
Feb 26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
js实现橱窗展示效果
Jan 11 Javascript
vue根据值给予不同class的实例
Sep 29 #Javascript
vue实现重置表单信息为空的方法
Sep 29 #Javascript
Vue中的Props(不可变状态)
Sep 29 #Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 #Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 #Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 #Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 #Javascript
You might like
php中动态调用函数的方法
2015/03/16 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
JS与框架页的操作代码
2010/01/17 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
python计算时间差的方法
2015/05/20 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Django中提示消息messages的设置方式
2019/11/15 Python
如何基于python实现脚本加密
2019/12/28 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
大专生简历的自我评价
2013/11/26 职场文书
书香校园建设方案
2014/05/02 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL