详解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

<style> .box{   background-color: #ff0; } .textColor{   color: #000; } .textSize{   font-size: 30px; } </style>   <div id="app">   <span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span> </div>   <script> 　　new Vue({   　　el: "#app", 　　data:{   　　isColor:true,   　　isSize:true 　　} 　　}) </script>

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

<style> .box{   background-color: #ff0; } .textColor{   color: #000; } .textSize{   font-size: 30px; } </style> <div id="app">   <span class="box" :class="classObject">我是字</span> </div> <script> new Vue({ el: "#app", data:{   classObject:{   'textColor': true,   'textSize': true   }   } }) </script>

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

<style> .box{   background-color: #ff0; } .textColor{   color: #0f0; } .textSize{   font-size: 30px; } </style> <div id="app">   <span class="box" :class="[classA,classB]">我是字</span> </div> <script> new Vue({   el: "#app",   data:{     classA: 'textColor',     classB: 'textSize'   } }) </script>

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

<style> .box{   background-color: #ff0; } .textColor{   color: #0f0; } .textSize{   font-size: 30px; } </style> <div id="app">   <span class="box" :class="[isA?classA:'', classB]">我是字</span> </div> <script> new Vue({   el: "#app",   data:{     classA: 'textColor',     classB: 'textSize',     isA: false   } }) </script>

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

 2.1

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

<div id="app">   <span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span> </div> <script>   new Vue({     el: "#app",     data:{       activeColor: 'red',       size: '30px',       shadow: '5px 2px 6px #000'     } }) </script>

2.2

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

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

2.3

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

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

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

<div id="app">   <img :src="url" /> </div> <script>   new Vue({     el: "#app",     data:{       url: "../img/pg.png"     } }) </script>

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>