精华内容
下载资源
问答
  • 主要介绍了vue动态绑定class选中当前列表变色的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue动态绑定class的几种常用方式,结合实例形式总结分析了vue.js常见的对象方法、数组方法进行class动态绑定相关操作技巧,需要的朋友可以参考下
  • VUE 动态绑定class

    千次阅读 2019-10-12 12:07:01
    //isActive 是在data里面布尔值, rotateRight 是 class 样式类 //isActive 为true时样式类 rotateRight 生效 <div :class="{rotateRight:isActive}">abs</div> 第二种:通过三元运算符判断使用哪个...

    第一种:通过一个布尔值判断样式类是否生效

    //isActive 是在data里面布尔值,   rotateRight 是 class 样式类 
    //isActive 为true时样式类 rotateRight 生效

    
    <div :class="{rotateRight:isActive}">abs</div>

    第二种:通过三元运算符判断使用哪个样式类

    //isActive 是在data里面布尔值 rotateRight 是 class 样式类 
    //isActive 为 true 时样式类 right 生效,为 false 时样式类 right2 生效

    <div :class="[isActive ? 'right' : 'right2']">abs</div>

    固定的样式和动态绑定同时存在

    errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:

    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
    

     

    展开全文
  • 本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考,具体如下: #1字符串绑定 :class=" 'className' " /* 如上示例是最简单的动态绑定,但好像没有任何意义,和不动态绑定的结果是一样的。 ...

    本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考,具体如下:

    #1 字符串绑定

    :class=" 'className' "
    
    /* 如上示例是最简单的动态绑定,但好像没有任何意义,和不动态绑定的结果是一样的。 */

    #2 对象绑定

    :class="{'className': 条件表达式 }"
    
    /* 当 条件表达式 为true时,则绑定 */

    #3 三目运算符绑定

    :class=" 条件表达式 ? 'className1' : 'className2' "
    
    /* 当 条件表达式 为 true 时绑定 'className1' 否则 绑定 'className2' */

    #4 数组绑定

    在实际的开发中,绑定的class会更多,这时候需要多种方式混合绑定

    :class=" [ {'className1': 条件表达式1 } , (条件表达式2 ? 'className2':'className3') ] "
    
    /* 如果有多个 类名 需要绑定且判断条件各不相同时,则需要使用混合方式,通过 数组中包含多个项来处理 */

    如果仅是上示例的需求,也可以写成如下(对象多个属性)方式:

    :class=" {'className1': 条件表达式1 , 'className2': 条件表达式2 , 'className3': !条件表达式2} "
    
    /* 相比较而言,用混合模式会相对精简 */

    #5 计算属性/函数绑定

    /* 计算属性绑定 */
    :class="计算属性名"
    
    
    /* 函数绑定 */
    :class="方法名()"
    
    
    在 计算属性 与 函数 中 return 正确的 class 字符串即可

    Vue.js 的动态绑定 class 的方式基本是以上几种,vue 还有一种更强大的处理就是如是你的class真的超多的话,可以绑定一个对象或者一个数组,以减少在 DOM 结构中写入过长的属性影响可读性及美观性。

    举一反三,绑定多个 style 值也是如此的。本篇文章就不再叙述。相信有不少的读者也为绑定多个不同判断条件的 class 烦恼过,本篇文章对大家有所帮助。

    作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com

    公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。

    更多精彩文章,请扫下方二维码关注我的公众号

    展开全文
  • vue动态绑定class属性

    2021-01-21 18:23:18
    <div :class="{color:scope.row.state == null || scope.row.state.toLowerCase() === 'error'}">{{scope.row.state}}</div> .color { color: #ea5151e8; }

    vue动态绑定class的方式:

    1. 第一种:对象的方式,:class = {iscolor : boo}
      (第一个参数iscolor为类名,第二个参数boo是一个变量,类型为一个boolean值)
    <div :class="{color:scope.row.state == null || 
    					scope.row.state.toLowerCase() === 'error'}">
    						{{scope.row.state}}
    </div> 
    
    data(){
    return {
    		iscolor : true
    	}
    }
    
    .color {
      color: #ea5151e8;
    }
    

    渲染后的

    <div  class = "color"></div>
    
    1. 第二种,数组的方式,class = [iscolor ? “color” : “nocolor”]
      (三木运算符的形式,iscolor 为变量,color 和 nocolor为类名,类名必须加引号)
    <div :color = iscolor ></div>
    
    data(){
    return {
    		iscolor : true
    	}
    }
    
    .color {
      color: #ea5151;
    }
    .nocolor {
      color: #3333e8;
    }
    

    渲染后的

    <div class = "color"></div>
    
    展开全文
  • vue动态绑定Class样式

    2020-10-24 10:26:05
    --vue代码--> <ul> <li v-for="item in itemData" :key="item"> <i :class="item.isA ? 'class_a' : 'class_b'"></i> </li> </ul> <!-- CSS代码 --> .class_...
    1. 三目元算符方式:
    <!--vue代码-->
        <ul>
          <li v-for="item in itemData" :key="item">
            <i :class="item.isA ? 'class_a' : 'class_b'"></i> 
          </li>
        </ul>
    
     <!-- CSS代码 -->
      .class_a,.class_b{
        /*这里可以写一些公共样式*/
      }
    
      .class_a{
        /*这里写需要设置的第一种样式*/
      }
    
      .class_b{
        /*这里写需要设置的第二种样式*/
      }
    
    
    
    1. 基本绑定:
    <!--vue代码-->
      <div :class="{class_a:isActive}"></div>
    
    <!-- 博主在这里用vue-cli做例子,小伙伴们注意与vue的区别 -->
      export default {
        name: "test1",
        data(){
          return{
            isActive:true
          }
        }
      }
    
    <!-- CSS代码 -->
      .class_a{
        /*这里写需要设置的样式*/
      }
    

    或者

    <block v-for="(item, index) in tab" :key="index">
    					<view class="list-cont" @click="tabs(index,item.nav)" :class="{active:index==num}">
    						<view>
    							<text class="con-text-a">{{ item.name }}</text>
    						</view>
    						<view>
    							<text class="con-text-b" :class="{activeb:index==num}">{{ item.title }}</text>
    						</view>
    					</view>
    				</block>
    

    在这里插入图片描述
    3.对象绑定

    <!--vue代码-->
        <div :class="classObject"></div>
    
    <!-- 博主在这里用vue-cli做例子,小伙伴们注意与vue的区别 -->
      export default {
        name: "test1",
        data(){
          return{
            classObject:{
              class_a:true,
              class_b:true
            }
          }
        }
      }
    
    <!-- CSS代码 -->
      .class_a{
        /*这里写需要设置的第一种样式*/
      }
    
      .class_b{
        /*这里写需要设置的第二种样式*/
      }
    

    4.绑定返回对象的计算属性

    <!--vue代码-->
        <div v-bind="classObject"></div>
    
    <!-- 博主在这里用vue-cli做例子,小伙伴们注意与vue的区别 -->
      export default {
        name: "test1",
        data(){
          return{
            isActive:true
          }
        },
        computed:{
          classObject:function () {
            return{
              class_a:this.isActive,
              class_b:!this.isActive
            //  这里要结合自身项目情况修改填写
            }
          }
        }
      }
    
    <!-- CSS代码 -->
      .class_a{
        /*这里写需要设置的第一种样式*/
      }
    
      .class_b{
        /*这里写需要设置的第二种样式*/
      }
    
    展开全文
  • vue动态绑定class的几种方式

    万次阅读 多人点赞 2018-10-30 17:03:27
    -最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染) :class=&quot;{ 'active': isActive }&quot; 判断是否绑定一个active :class=&quot;{'active':isActive==-1}&quot;...
  • vue动态绑定class的三种方式

    千次阅读 2020-07-16 11:01:15
    在开发项目中很多时候需要根据后端接口返回的不同状态来动态的显示前端页面,此时我们就可以动态操作元素的class来达到我们的目的。 方法一:传给 v-bind:class 一个对象 <template> <div class=...
  • vue动态绑定class以及实现点击切换效果 记录一下vue: 如果是单独的按钮,可以直接再data里面定义一个关联状态的值clickButton <button :class="( clickButton=== true ? 'active' : '')"> 如果我们是循环的,...
  • vue动态绑定class

    千次阅读 2018-01-01 16:36:44
    1.v-bind:class 一个对象,以动态地切换 class: <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> 结果为:<div class="static active"></div>...样式动态绑定对象<div v-bind
  • <div class="static" :class="{'active':isActive,'error':isError}"></div> 说明:对象中也可以传入多个属性,来动态切换class。另外,:class可以与普通class共存。
  • vue动态绑定class时遇到的问题

    千次阅读 2018-02-22 10:18:00
    本来想实现动态绑定class,却发现了很奇怪的问题,代码如下 从代码看,是个很简单的逻辑, 通过button点击变色,使data中的值改变,从而给div绑定新的class,因为在真正的项目中click是一个ajax请求,为了制造...
  • 函数里能获取到li的index下标,但是class切换没有效果 HTML代码: ​ <ul class="menuUl"> <li v-for="(li,index) in lis" @click="SelectLi(index)" :class="{isSelectedLi:SelectedLi===index}" :key=...
  • Vue动态绑定Class的三种方法 1.三目运算符动态绑定Class css .red{ background-color: red; } .yellow{ background-color: yellow; } 三目运算符的规则:A = B?C:D 当B为真时 A赋值为C ...
  • vue动态绑定class的方法

    千次阅读 2018-07-13 11:12:42
    1、动态绑定class的方法,我自己记一下吧,每次用的时候想半天,好记性不如烂笔头,记下来吧2、v-text的用法
  • 一、动态绑定class。 可以使用v-bind绑定,如“v-bind:class = ''”,缩写:“:class = ''”。 不同形式: 1.数组形式(类名必须用''包起来): <div :class="['red', 'font16']">内容</div> 2....
  • 三目运算符vue语法 #标签内容 {{button? ‘取消’ :‘确定’}} 【例子】 <el-button class="button" type="primary" @tap="handleClick">{{button? '取 消' : '确 定'}} </el-button> #...
  • vue动态绑定class,tab切换非常好用

    千次阅读 2018-06-07 13:46:16
    v-bind:class="{'decoration-line':showLeft}" class="col-xs-6 col-md-6 text-center theme-color item"&gt; 排班信息 &lt;/div&gt; &lt;div @click="tab('right')&...
  • 动态绑定class的几种方式 1.对象语法 行内或计算属性 <style> .static { width: 100px; height: 100px; background-color: #ccc; } .orange { border: 1px solid orange; } </style&...
  • vue提供动态绑定class的方法,根据属性控制控制class的显示与隐藏。 用法实例: <template> <div> <div :class="{testStyle:testComputed}">123</div> <div :class="{testStyle2:...
  • vue动态绑定class练习。 :class=“{ ‘类名1':条件表达式,‘类名2':条件表达式… }” <div class=app-*> (item,i) key=i class=item click=clickIndex class={ xss=removed> [removed] export ...
  • 1.绑定单个class html部分: <div :class="{'active':isActive}"></div> js部分:判断是否绑定一个active data() { return { isActive: true }; } 结果渲染为: <div class="acti...
  • div class="category-selector"> <ul class="sort-type"> <li v-for="(item, index) in sortTypeTag" :key="index"> <a href="javascript:void(0);" @click="changeSortType(it
  • vue 通过动态绑定class,改变样式

    千次阅读 2018-10-25 10:02:48
    v-bind:class="addButtonStyle" >  添加 /el-button> data () { return { allData:{ {id:''}, {id:''} }, selectData:{ id:'' }, isAddBtnDisabled:false, //按钮是否可用 } ...
  • 下面我们使用Vue的v-bind绑定class v-bind动态绑定class 对象语法绑定(常用) red和size的值为true就在class显示red和size,false就不显示。下面有两种写法: <style> .red{ color: red; } .size{ font...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,989
精华内容 23,595
关键字:

vue动态绑定class

vue 订阅