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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php网上商城购物车设计代码分享
2012/02/15 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
python递归计算N!的方法
2015/05/05 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
python executemany的使用及注意事项
2017/03/13 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python散点图实例之随机漫步
2018/08/27 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python中web框架的自定义创建
2019/09/08 Python
tensorflow 实现数据类型转换
2020/02/17 Python
廉政教育心得体会
2014/01/01 职场文书
优秀教师主要事迹
2014/02/01 职场文书
高三政治教学反思
2014/02/06 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
争做文明公民倡议书
2014/08/29 职场文书
实验心得体会
2014/09/05 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android