vuejs v-bind adds attributes to elements

1. Dynamically bind one or more common attributes (css attributes), such as class, style, etc.

<img v-bind:src="imageSrc">

<button v-bind:[key]="value"></button>

<img :src= "'/path/to/images/' + fileName" >

<div v-bind:text-content.prop="text"></div>

Modifier :

.prop - Bind as a DOM property rather than as an attribute.
.camel - (2.1.0+) Convert kebab-case attribute names to camelCase. (Supported from 2.1.0)
.sync (2.3.0+) Syntax sugar that will be expanded into a v-on listener that updates the parent component's binding value.

Let’s look at it in detail:

1. Binding through HTML class

---Object syntax:

传给v-bind:class An object to dynamically switch classes:

<div v-bind:class="{ active: isActive }"></div>

active is the class name, isActive is a Boolean value;

More fields to dynamically switch multiple classes, such as:

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

v-bind:class Directives can also coexist with ordinary class attributes.

isActive, hasError objects in data:

data: {
  isActive:true,
  hasError: true
}

The result is rendered as:

The bound data object does not have to be defined inline in the template. An object can be defined directly, such as:

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

You can also bind a computed property of the returned object here , such as:

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

---Array syntax:

Pass an array v-bind:classto apply a class list, such as:

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Rendered as:

To switch classes in the list based on conditions, you can use ternary expressions, such as:

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

When isActive is true, the activeClass class is displayed, and when it is false, the errorClass class is displayed.

When there are multiple conditional classes, object syntax can also be used in array syntax, such as:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

data: {
  isActive: true,
  errorClass: 'text-danger'
}

--- Used on components:

When using properties on a custom component class , these classes will be added to the root element of the component. Classes that already exist on this element will not be overwritten.

For example, if you declare this component:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

Then add some classes when using it:

<my-component class="baz boo"></my-component>

HTML will be rendered as:

The same applies to classes with data binding, such as:

<my-component v-bind:class="{ active: isActive }"></my-component>

When isActive true, HTML will be rendered as:

2. Bind inline styles

---Object syntax:

v-bind:style The object syntax is very intuitive - it looks very much like CSS, but it is actually a JavaScript object .

like:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

activeColor, fontSize is an object:

data: {
  activeColor: 'red',
  fontSize: 30
}

Bind an object directly, such as:

<div v-bind:style="styleObject"></div>

styleObject object in data:

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

---Array syntax:

v-bind:style The array syntax can apply multiple style objects to the same element:

like:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

data:{
    baseStyles:{
      backgroundColor:'green',
        color:'#ffffff'
      },
      overridingStyles:{
        borderRadius:'20px',
        'font-weight': 'bold'
      },
}

--- Automatically add prefix:

When v-bind:style using CSS properties that require adding a browser engine prefixtransform , for example , Vue.js will automatically detect and add the corresponding prefix.

---Multiple values:

Starting from 2.3.0 you can style provide an array containing multiple values for the property in the binding, which is often used to provide multiple prefixed values, for example:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Writing this way will only render the last value in the array that is supported by the browser. In this case, it will only render if the browser supports flexbox without the browser prefix display: flex.

Google shows: