v-bind bind class or style of basic grammar

v-bind binding class

One way: object syntax

Meaning of the object syntax is: behind with an object class

<h2 :class="{类名1: value1, 类名1: value2}">{{message}}</h2>

A Usage: directly by binding a class {}
 <h2: class = "{ '
 active': isActive}"> Hello <h2 /> World 
Usage II: can also be determined by, passing a plurality of values
 <h2: class = "{ 'active': isActive,
 'line': isLine}"> Hello h2 World </> 
usage three: Common classes exist and do not conflict 
NOTE: If isActive and isLine are true, then there title / Active / Line three classes
 <h2 class = "title":
 class = "{ 'active': isActive, 'line': isLine}"> Hello <h2 /> World 
usage four: If too complicated, it can be placed in a methods or computed in 
NOTE: classes is a calculated attribute
 </ h2> Hello World: < class = "classes" h2 class = "title">

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
　　.line{
　　　　border-bottom:1px solid #000;
　　}
  </style>
</head>
<body>

<div id="app">
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="changeClass()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'bind绑定class',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick(){
        this.isActive = !this.isActive
      },
      changeClass(){
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>
</body>
</html>

Second way: array syntax

Meaning array syntax is: with the back of class is an array

A Usage: directly by binding a class {}
 <h2: class = "[ '
 active']"> Hello World </ h2> 
Usage II: can also pass multiple values
 <h2: class = "[ ' active' , 'Line'] " > the Hello World </ H2> 

usage three: Common classes exist and do not conflict 
Note: there title / active / line three classes 
<H2 class = " title ": class =" [ 'active', 'line']
 "> Hello h2 World </> 
usage four: If too complicated, can be placed in a computed or methods 
Note: a property of classes is calculated
 <h2 class =" title ": class =" classes "> Hello World </ h2>

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
　<style>
    .active {
      color: red;
    }
　　.line {
　　　　border-bottom:1px solid #000;
　　}
  </style>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}</h2>
  <h2 class="title" :class="changeClass()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    data: {,'#app'
    el:view ({new=
  const app
      message:'v-bind绑定class',
    },
    methods: {
      changeClass: function () {
        return [this.active, this.line]
      }
    }
  })
</script>
</body>
</html>

v-bind binding style

One way: object syntax

Meaning of the object syntax is: with style behind an object

<H2: style = "{key (attribute name): value (attribute value)}"> {{message}} </ h2>

behind with an object type style 
　　key is CSS object attribute name 
　　value assigned specific object is the value of the attribute data value may be derived from

:style="{color: 'red', fontSize:'50px'}"

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 class="title" :style="{color: 'red', fontSize: '50px'">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'v-bind绑定style',
    }
  })
</script>
</body>
</html>

Second way: array syntax

Meaning array syntax is: with the back of class is an array

with the latter is an array type style 
　　plurality of values, can be divided

<div v-bind:style="[bgc, fontsize]"></div>

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 :style="[bgc, fontsize]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      bgc: {backgroundColor: 'red'},
      fontsize: {fontSize: '100px'},
    }
  })
</script>
</body>
</html>

v-bind bind class or style of basic grammar

Guess you like