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

赞 (0)

相关推荐

  • vue实现样式之间的切换及vue动态样式的实现方法

    vue实现样式之间的切换及vue动态样式的实现方法

    前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)

  • vuejs实现标签选项卡动态更改css样式的方法

    html <ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}

  • 详解Vue.js动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c

  • vue 中动态绑定class 和 style的方法代码详解

    先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

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

    在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示: 当值为"是"时,显示绿色的标签,当值为"否"时,显示为灰色的标签. 标签的样式分别为: <el-tag type="success">绿色标签</el-tag> <el-tag type="info">灰色标签</el-tag> 关键在于type的样式部分,我们利用vue的样式绑定,

  • Vue 根据条件判断van-tab的显示方式

    我就废话不多说了,大家还是直接看代码吧~ .vue <van-tabs v-model="activeTab"> <van-tab title="XXX" v-if="isShow"></van-tab> <van-tab title="XXX"></van-tab> </van-tabs> .ts private activeTab = 0; priva

  • Vue中使用 class 类样式的方法详情

    Vue中使用 class 类样式的方法详情

    在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在 style 标签中 书写一个类名为 active的样式 <style> .active{ color: red; font-size: 20px; font-style: normal; } </style> 在我们的 script 标签中创建一个 vm 实例,在实例的 data 数据中心写上 isActive:true , true 表示使用此样式,false 则表示不使用 <script

  • vue实现tab切换外加样式切换方法

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100

  • vue实现条件叠加搜索的解决方法

    vue实现条件叠加搜索的解决方法

    案例场景: 现在有个文章管理模块,在该模块中有栏目选择.文章搜索.分页功能.这些功能改变其中一个都会对查询的文章有所改变.案例图如下: 实现方案有两种: 其一.我们开始可能会想到对每个功能绑定一个处理事件,但是这样做我们对数据的维护工作将大大加大,而且用这样方案做数据的叠加筛选不是很好. 方案二.我们将所有提交的数据放到一起维护然后再进行深度监听,当某一个值.或多个值的改变时,在去进行数据的查询,此时问题也变得更易于理解与维护,具体实现如下: 分页代码如下: <template> <el

  • vue 如何根据条件判断属性的添加和去除

    目录 根据条件判断属性的添加和去除 解决方法 Vue 的条件判断语句 v-if v-else v-else-if v-show v-if 与 v-show 的区别 根据条件判断属性的添加和去除 写一个列表,然后想要在查询数据的过程中添加loading样式,这个时候需要添加一个loading属性,但是添加之后会有直接展示loading. 解决方法 :loading = isLoading 在下面需要注册isLoading为boolean类型,如下: isLoading:false/true 然后在

  • vue三元运算之多重条件判断方式(多个枚举值转译)

    目录 vue多重条件判断(多个枚举值转译) vue标签中使用三元运算符 vue多重条件判断(多个枚举值转译) 直接上代码: div class="msgLi">      <p>组织设置:</p>      <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.pa

  • VUE中V-IF条件判断改变元素的样式操作

    方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense> <template v-for="(col,i) in cols"> <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'"> <v-list-item-content><b>{{col.text}}</b></

  • vue如何根据条件判断按钮是否可以点击

    vue如何根据条件判断按钮是否可以点击

    目录 根据条件判断按钮是否可以点击 方法一:使用v-if .v-else 来判断 方法二:增加一个变量,判断 vue判断点击当前元素 需要判断你是点击了遮罩层还是form表单 接下来是分别对e.currentTarget.e.target打印 根据条件判断按钮是否可以点击 按钮当在特定环境下不可点击,需要根据判断来控制点击事件. 方法一:使用v-if .v-else 来判断 <template>     <div>         <el-button v-if="

  • Vue修改mint-ui默认样式的方法

    在使用vue框架开发时,饿了么的mint-ui框架是个不错的选择,但是有时候我们需要修改它的默认样式,方法如下: 1.在src/assets/css目录下新建scss文件,my-mint.scss,内容如下: /* 覆盖mint-ui的primary颜色,改为自己UI的主题色 */ $color-primary: #05AFAF; .mint-header { background-color: $color-primary; } .mint-button:not(.is-disabled):a

随机推荐