精华内容
下载资源
问答
  • 今天小编就为大家分享一篇vue中动态添加class类名的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇在vue中动态添加class类进行显示隐藏实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue中 动态添加class写法 动态静态clas混合 示例 //fx,cont-block为静态class ob为动态class <div :class="[ 'fx','cont-block',{ob : index == '0'}]" v-for="(item,index) in objData" @click=...

    Vue中 动态添加class写法 动态静态clas混合

    示例

    
    //fx,cont-block为静态class  ob为动态class
    <div :class="[ 'fx','cont-block',{'ob' : index == '0'}]" v-for="(item,index) in objData" @click="changeStatus">
                <div class="blocktitle">{{item.name}}
                    <span :class="['iconfont', item.iconClass]"></span>
                </div>
                 <div class="p-radio">
                    <div class="p-radio-block"></div>
                </div>
            </div>
    
    //三目运算
     :class="['info-block' ,index == 3 ? 'afterborder' :'']"

    分析

    在有多个class,需要静态动态混合使用时,可以将class写为数组。静态的引号引起来表示为静态,动态的可以用大括号括起来,里面可以写表达式,表达式的写法要注意,多个class之间用逗号分隔。另外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

    千次阅读 2019-05-09 18:55:15
    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单 <template> <section class="p-10 cursor-pointer...

    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单

    <template>
      <section class="p-10 cursor-pointer">
        <p :class="`${condition1 ? 'font' : ''}${condition1 ? ' size' : ''}`">
          HAPPY
        </p>
      </section>
    </template>
    <script>
      export default {
        data() {
          return {
            condition1: true,
            condition2: true
          };
        },
        methods: {
        }
      };
    </script>
    
    <style lang="scss">
      .font {
       color: red;
      }
      .size {
        font-size: 50px;
      }
    </style>

     

    展开全文
  • Vue 动态赋值 class

    千次阅读 2018-09-14 08:48:36
    Vue 动态赋值 class Vue 在操作 DOM 元素的 class 属性时,有以下多种方法 更多精彩 更多技术博客,请移步 asing1elife’s blog 比较通用的是否赋值方式 通过以下 :class="{show: show}" 的...

    Vue 动态赋值 class

    Vue 在操作 DOM 元素的 class 属性时,有以下多种方法

    更多精彩

    比较通用的是否赋值方式

    1. 通过以下 :class="{show: show}" 的方式可以决定该元素是否拥有名称为 show 的 class
      • data() 中的 show 属性为 true ,则赋予 show class ,否则不赋予
    <template>
        <div class="watch-mooc-panel" :class="{show: show}"></div>
    </template>
    
    <script type="text/ecmascript-6">
      export default {
        name: 'mooc',
        data() {
          return {
            show: false
          }
        }
      }
    </script>
    
    <style scoped lang="stylus" rel="stylesheet/stylus">
        .watch-mooc-panel
          width 100%
          height 100%
          position absolute
          transition background-color .3s
          &.show
            background-color #000000
    </style>

    使用三目运算符的方式

    1. 注意使用三木运算符添加的属性语法和上述方式存在明显区别
    <template>
        <div class="watch-mooc-panel" :class="show ? 'show' : 'hide'"></div>
    </template>
    展开全文
  • vue 中动态绑定class 和 style的方法

    万次阅读 2018-06-01 15:43:04
    :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{open:appitem.open==true}]" :class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" :class="...
  • 在使用Vue时,遇到一个需求,就是根据数值不同赋予一个div不同得样式,翻看文档,文档并没有提到可以或如何使用if进行判断,于是进行了尝试,发现是可以的。 ###下面让我们观看代码 <div v-for="(item,index) in ...
  • vue动态class

    千次阅读 2019-04-17 11:22:53
    (1)取一个class <div v-bind:class="isRed?'colorRed':'colorGreen'"> hello world </div> (2)取多个class <div :class="{'red':true,'big':true}"> hello world </div> (3)...
  • vue中动态添加class类进行显示隐藏

    万次阅读 2018-06-25 16:45:02
    div class="status_button"&gt; &lt;el-button type="success" @click="checkSite" &gt;查岗&lt;/el-button&gt; &lt;el-button type="danger"
  • vue中:class绑定动态样式

    千次阅读 2019-07-29 15:03:26
    当item.isShrink为true时...很方便,用作控制元素在只有某类名或者同时具有某些类名时的样式,和原生或者Jquery去选择dom节点然后事件行为添加类名是相同的,但是vue的核心便是数据驱动,所以其也体现了这一核心。 ...
  • Vue动态class写法总结

    千次阅读 2019-06-25 17:14:00
    对象方法 最简单的绑定 :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive==-1}" 或者 ...:class="{'active':isActive==index}" ...:class=...
  • VUE :class 动态class方法

    千次阅读 2020-03-27 17:59:02
    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。...vue官方文档对于class和style绑定有两种方法,对象语法...
  • 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>2.样式动态绑定对象...
  • vue 动态添加class

    千次阅读 2018-10-10 11:56:30
    第一步: &lt;div class="noticePage"...fixTitle是当达到某种条件时动态添加的class名,whether是判断是否 第二步: 在data里面 data(){ return{ whether:false } } 第三步: 在...
  • 主要介绍了vue动态绑定class选中当前列表变色的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue中Class/Style绑定就是为了实现动态样式效果的技术手段。Vue针对v-bind 用于 class 和 style 时做了针对的增强处理,表达式结果的类型除了普通的字符串之外,同时还可以支持对象以及数组类型。
  • vue中动态添加class类名(对象形式)

    千次阅读 2020-09-24 13:36:45
    :class="{'active': activeTab === index}" 突然遇到比较复杂的需求,比如根据客户类型展示不一样的样式(有很多种客户类型,每个都不一样) 以前百度看到有很多种方法,都没有一一去尝试,直到自己需要用的时候才...
  • vue动态绑定class的几种方式

    万次阅读 多人点赞 2018-10-30 17:03:27
    :class=&quot;{ 'active': isActive }&quot; 判断是否绑定一个active :class=&quot;{'active':isActive==-1}&quot; 或者 :class=&quot;{'active':isActive==index}&quot; ...
  • Vue点击动态添加Class

    万次阅读 2019-04-22 10:13:06
    1.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1,// 0为默认选择第一个,-1为不选择 list: [ {title: '全网搜索(100w+)'}, {title: '优惠推荐(包邮10w+)'}, ], ...
  • vue 动态控制class

    千次阅读 2020-04-10 17:23:20
    el-input :class="{'myClassbHouseNameA':cellNameList.houseState=='01','myClassbHouseNameC':cellNameList.houseState=='02','myClassbHouseNameR':cellNameList.houseState=='03','myClassbHouseNameT':c...
  • Vue中设置class类样式

    千次阅读 2020-05-23 19:56:13
    vue中通过属性绑定为元素设置class类样式vue中class类样式的4种绑定方式1、数组2、三元表达式3、数组嵌套对象4、直接使用对象 vue中class类样式的4种绑定方式 1、数组 <h1 :class="['thin','red','italic','...
  • vue动态切换class

    千次阅读 2018-04-04 17:38:38
    &lt;div id="wrap" class="box"&gt; &...div :class="... class="...动态切换class类&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 226,094
精华内容 90,437
关键字:

vue中动态class

vue 订阅