vue实现条件判断动态绑定样式的方法
更新时间：2018年09月29日 10:18:01 作者：潇I洒
今天小编就为大家分享一篇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实现条件判断动态绑定样式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了详解vuejs几种不同组件（页面）间传值的方式，具有一定的参考价值，有兴趣的可以了解一下2017-06-06
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
今天小编就为大家分享一篇对vue2.0中.vue文件页面跳转之.$router.push的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue在.js文件中如何进行路由跳转，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
表单元素挺多的，本文主要介绍了element的表单元素使用总结，主要包括文本框类、选择类、其他类，有一定的参考价值，感兴趣的可以了解一下2021-06-06
最近找到几个好用的插件,这里分享一下,下面这篇文章主要给大家介绍了关于vue3中超好用的插件整理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue中$router和$route的区别，对vue感兴趣的同学，一定要看下2021-05-05
这篇文章主要为大家详细介绍了vue使用element-ui实现表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
Element-ui/Element-plus Vue报错问题及解决
这篇文章主要介绍了Element-ui/Element-plus Vue报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Ant Design Pro 菜单自定义 icon，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue3+TypeScript实现Docx/Excel预览组件
这篇文章主要为大家详细介绍了如何使用Vue3+TypeScript实现Docx/Excel预览组件,文中的示例代码讲解详细,有需要的小伙伴可以参考下2024-04-04
最新评论