详解VUE中v-bind的基本用法

1. v-bind:class（根据需求进行选择）

1.1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

"app">   "box" :class="{'textColor':isColor, 'textSize':isSize}">我是字

1.2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

"app">   "box" :class="classObject">我是字

1.3

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

"app">   "box" :class="[classA,classB]">我是字

1.4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

"app">   "box" :class="[isA?classA:'', classB]">我是字

 2.v-bind:style (根据需求进行选择，驼峰式)

 2.1

1 2 3 4 5 6 7 8 9 10 11 12 13

"app">   "box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字

2.2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

"app">   "box" :style="styleObject">我是字

2.3

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

"app">   "box" :style="[styleA,styleB]">我是字

2.4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id="app">   <span class="box" :style="[isA?styleA:'', styleB]">我是字span> div> <script> new Vue({   el: "#app",   data:{     styleA:{       fontSize: '30px',       color: 'red'     },     styleB:{       textShadow: '5px 2px 6px #000'     },     isA: false   } }) script>

3.v-bind:src

1 2 3 4 5 6 7 8 9 10 11

"app">   "url" />

4.v-bind:title

1 2 3 4 5 6 7 8 9 10 11

<div id="app">   <div :title="message">我是字div> div>  <script type="text/javascript">   new Vue({   el: "#app",   data:{     message:"我是吱吱"   }   }) script>