Vue 样式切换及三元判断样式关联操作

2024-12-05 12:07:01

假设有需求：

后台返回状态1:启用，0：禁用

1、若要使启用为绿色，禁用不添加其他样式

 <el-table-column
  prop="statusName"
  align="center"
  label="状态">
  <template slot-scope="scope">
  <div :class="{active:scope.row.status==1}">
  {{ scope.row.statusName }}
  </div>
  </template>
  </el-table-column>
 .active{
 color:green;
 }

1、若要使启用为绿色，禁用为红色，可使用三元表达式绑定样式

 <el-table-column
  prop="statusName"
  align="center"
  label="状态">
  <template slot-scope="scope">
  <div :class="scope.row.status==1? 'active':'native'">
  {{ scope.row.statusName }}
  </div>
  </template>
  </el-table-column>
.active{
 color:green;
 }
 .native{
 color:red;
 }

补充知识：vue通过判断写样式(v-bind)

如下所示：

v-bind:style="$index % 2 > 0?'background-color:#FFF;':'background-color:#D4EAFA;'"

以上这篇Vue 样式切换及三元判断样式关联操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

利用Vue的v-for和v-bind实现列表颜色切换

需求: 在页面上显示四个列表,初始时字体为黑色. 鼠标点击某一个列表时,该列表的颜色变为红色,其余列表仍为黑色. 代码实现:  <style> .red{ color: red; } </style>  <div id="app"> <ul> <li v-for="item,index in movies" :class="{re
一文读懂vue动态属性数据绑定（v-bind指令）

v-bind的基本用法一.本节说明前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖三. 效果四. 深入在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态
详解VueJs中的V-bind指令

引子 v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如:  <a v-bind:href="url"></a>  <a :href="url"></a> 一.概述 v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑
Vue 样式切换及三元判断样式关联操作

假设有需求: 后台返回状态1:启用,0:禁用 1.若要使启用为绿色,禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope"> <div :class="{active:scope.row.status==1}"> {{ scop
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
详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g
详解微信小程序Radio选中样式切换

详解微信小程序Radio选中样式切换本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下:  <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi
vue 动态修改a标签的样式的方法

公司要做一个类似今日头条的项目,用前后端分离的方式做成HTML5页面,先在微信中运行,领导说想看看效果怎么样.今日头条头部的导航是可以滚动和添加类别的,我们这个项目也是一样.所以在导航这个地方就需要在点击不同分类的同时,样式也是跟着变的,我在网上搜索了一下,发现了下面的代码,简洁清淅,不过具体网址忘记了,先把代码贴出来给大家看一下,想知道网址的可以去网上搜索一下. <!DOCTYPE html> <html lang="en"> <head> <
vue 导航内容设置选中状态样式的例子

如图所示,我们一般需要切换的时候选中导航给个active样式, 而router-link 标签在选中的时候会自动给整个标签添加一个 router-link-active的class 可给router-link 标签里面的span.i标签如下设置,非常简单,下面是stylus的写法,不需要的话也可以写成平时的css写法 .router-link-active span i color: red 以上这篇vue 导航内容设置选中状态样式的例子就是小编分享给大家的全部内容了,希望能给大家一个参考
JS实现的样式切换功能tableCSS实例

本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r
基于JS实现简单的样式切换效果代码

本文实例讲述了基于JS实现简单的样式切换效果.分享给大家供大家参考.具体如下: 这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,我觉得这是个挺实用的不错的功能,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
vue滚动固定顶部及修改样式的实例代码

滚动固定位置有多种方法 1 css3 粘性定位 position:sticky: top:20px: 2直接position:fixed:给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度 3事件监听更改style中的position属性 ** 修改样式滚动监听事件中使用this.$refs.xxx.style.color='xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所
javascript实现电脑和手机版样式切换

本文实例为大家分享了javascript实现电脑和手机版样式切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ list-style: none; } </style> </head&

Vue 样式切换及三元判断样式关联操作

相关推荐

随机推荐