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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
原生JS实现相邻月份日历
Oct 13 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类
2006/10/09 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
jquery实现图片放大点击切换
2017/06/06 jQuery
深入理解vue-router之keep-alive
2017/08/31 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
浅析Python requests 模块
2020/10/09 Python
《落花生》教学反思
2014/02/25 职场文书
西式婚礼主持词
2014/03/13 职场文书
单位承诺书格式
2014/05/21 职场文书
投资意向书
2014/07/30 职场文书
护士个人年终总结
2015/02/13 职场文书
django中websocket的具体使用
2022/01/22 Python
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
Nginx反向代理、重定向
2022/04/13 Servers