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

更新时间：2018年09月29日 10:18:01 作者：潇I洒

今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

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实现条件判断动态绑定样式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中使用hover选择器无效的问题
这篇文章主要介绍了vue中使用hover选择器无效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
VUE写一个简单的表格实例
在本篇文章里小编给大家整理的是关于VUE中表格的写法实例以及相关知识点内容，需要的朋友们可以参考下。
2019-08-08
Vue中使用better-scroll实现轮播图组件
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下
2020-03-03
vue实现简单转盘抽奖功能
这篇文章主要为大家详细介绍了vue实现简单转盘抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vite.config.ts配置之自动导入element-puls方式
这篇文章主要介绍了vite.config.ts配置之自动导入element-puls方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue使用element-ui实现菜单导航
这篇文章主要为大家详细介绍了Vue使用element-ui实现菜单导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
el-form组件清除校验提示正确方法(前端技能提升)
el-form组件提供了表单验证的功能,可以通过在el-form上绑定rules属性,并在el-form-item上设置prop属性来进行校验,这篇文章主要给大家介绍了关于el-form组件清除校验提示正确方法(前端技能提升)的相关资料,需要的朋友可以参考下
2023-12-12
webpack项目中使用vite加速的兼容模式详解
这篇文章主要为大家介绍了webpack项目中使用vite加速的兼容模式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现
本文主要介绍了Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue watch自动检测数据变化实时渲染的方法
本篇文章主要介绍了vue watch自动检测数据变化实时渲染的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01