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 相关文章推荐
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
vue中实现左右联动的效果
Jun 22 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
JS原型与继承操作示例
May 09 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
详解JavaScript 的执行机制
Sep 18 Javascript
原生JavaScript实现留言板
Jan 10 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中目录,文件操作详谈
2007/03/19 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
python 决策树算法的实现
2020/10/09 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
C语言面试题
2013/05/19 面试题
医生自荐信
2013/10/11 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
软环境建设心得体会
2014/09/09 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
求职信如何撰写?
2019/05/22 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫