Three ways to bind class with vue

1. Object syntax

1. Set an object for v-bind:class, which can dynamically switch class, for example:

<div >
  <div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true
  }
})
</script>

Final rendering result:

<div class="active"></div>

2. Multiple attributes can also be passed into the object to dynamically switch class. In addition, :class can coexist with ordinary classes, for example:

<div >
  <div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    isError:false
  }
})
</script>

The final rendering result (when the data isActive or isError changes, the corresponding class will also be updated):

<div class="static active"></div>

3. When the expression of:class is too long or the logic is complicated, a computed property can also be bound. This is a friendly and common usage. Generally, when there are more than two conditions, data or computed can be used, for example:

<div >
  <div :class="classes"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    isError:null
  },
  computed:{
    classes(){
      return {
        active: && !,
        'text-fail': &&  ==='fail'
      }
    }
  }
})
</script>

In addition to computed attributes, you can also directly bind an Object-type data, or use methods similar to computed attributes.

2. Array Syntax

1. When multiple classes need to be applied, you can use array syntax to bind an array to:class and apply a class list:

<div >
  <div :class="[atvieCls,errorCls]"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    atvieCls:'active',
    errorCls:'error'
  }
})
</script>

The rendered result is:

<div class="active error"></div>

2. Use ternary expressions to switch class according to the conditions (the style active will be applied only when the data isActive is true):

<div >
  <div :class="[isActive ? activeCls : '',errorCls]"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    atvieCls:'active',
    errorCls:'error'
  }
})
</script>

The rendered result is:

<div class="active error"></div>

3. When class has multiple conditions, writing this way is more cumbersome. You can use object syntax in array syntax:

<div >
  <div :class="[{'active':isActive},errorCls]"></div>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    isActive:true,
    errorCls:'error'
  }
})
</script>

4. Like object syntax, you can also use data, computed, and method, taking the calculation attribute as an example:

<div >
  <button :class="classes"></button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      size: 'large',
      disabled: true
    },
    computed: {
      classes: function () {
        return [
          'btn',
          {
            ['btn-'+]: !=='',
            ['btn-disabled']: ,
          }
        ]
      }
    }
  })
</script>

The rendered result is:

<div class="btn btn-large btn-disabled"></div>

As above, style btn will always be applied. When the data size is not empty, the style prefix btn- will be applied, followed by the size value; when the data disabled is true, style btn-disabled will be applied.

Use computed attributes to dynamically set class names for elements, which are often used in business, especially when writing multiplexed components. Therefore, during the development process, if the expression is long or the logic is complex, computed attributes should be used as priority as possible.

3. Use on components

If you use class or :class directly on a custom component, the style rules will be applied directly to the root element of this component, such as declaring a simple component:

<script>
  ('my-component', {
    template: '<p class="article">Some text</p>'
  })
</script>

Then when calling the component, use object syntax or array syntax to bind the component to the class, taking object syntax as an example:

<div >
  <my-component :class="'active':isActive"></my-component>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true
    }
  })
</script>

The final component rendering result is:

<p class="article active">Some text</p>

This method is only applicable to the outermost layer of a custom component, which is a root element, otherwise it will be invalid. When this condition is not met or a class name is required to be set for specific child elements, the component's props should be passed.

The above is the detailed content of the three methods of vue binding class. For more information about vue binding class, please follow my other related articles!