Vue.js中的v-bind属性详解和案例

野性酷女 2024-03-22 16:00 53阅读 0赞

动态地绑定一个或多个 attribute(属性)，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<table> 
 <tbody> 
 <tr> 
 <td> 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 26 27 28 29 30 31 32 33 34 35 36 </td> 
 <td> <code>&lt;!--&nbsp;绑定&nbsp;attribute&nbsp;--&gt;</code> <code>&lt;img&nbsp;v-bind:src=</code><code>"imageSrc"</code>&nbsp;<code>/&gt;</code> <code>&lt;!--&nbsp;动态&nbsp;attribute&nbsp;名&nbsp;--&gt;</code> <code>&lt;button&nbsp;v-bind:[key]=</code><code>"value"</code><code>&gt;&lt;/button&gt;</code> <code>&lt;!--&nbsp;简写/缩写&nbsp;--&gt;</code> <code>&lt;img&nbsp;:src=</code><code>"imageSrc"</code>&nbsp;<code>/&gt;</code> <code>&lt;!--&nbsp;动态&nbsp;attribute&nbsp;名缩写&nbsp;--&gt;</code> <code>&lt;button&nbsp;:[key]=</code><code>"value"</code><code>&gt;&lt;/button&gt;</code> <code>&lt;!--&nbsp;内联字符串拼接&nbsp;--&gt;</code> <code>&lt;img&nbsp;:src=</code><code>"'/path/to/images/'&nbsp;+&nbsp;fileName"</code>&nbsp;<code>/&gt;</code> <code>&lt;!--&nbsp;class&nbsp;绑定&nbsp;--&gt;</code> <code>&lt;div&nbsp;:class=</code><code>"{&nbsp;red:&nbsp;isRed&nbsp;}"</code><code>&gt;&lt;/div&gt;</code> <code>&lt;div&nbsp;:class=</code><code>"[classA,&nbsp;classB]"</code><code>&gt;&lt;/div&gt;</code> <code>&lt;div&nbsp;:class=</code><code>"[classA,&nbsp;{&nbsp;classB:&nbsp;isB,&nbsp;classC:&nbsp;isC&nbsp;}]"</code><code>&gt;&lt;/div&gt;</code> <code>&lt;!--&nbsp;style&nbsp;绑定&nbsp;--&gt;</code> <code>&lt;div&nbsp;:style=</code><code>"{&nbsp;fontSize:&nbsp;size&nbsp;+&nbsp;'px'&nbsp;}"</code><code>&gt;&lt;/div&gt;</code> <code>&lt;div&nbsp;:style=</code><code>"[styleObjectA,&nbsp;styleObjectB]"</code><code>&gt;&lt;/div&gt;</code> <code>&lt;!--&nbsp;绑定一个全是&nbsp;attribute&nbsp;的对象&nbsp;--&gt;</code> <code>&lt;div&nbsp;v-bind=</code><code>"{&nbsp;id:&nbsp;someProp,&nbsp;'other-attr':&nbsp;otherProp&nbsp;}"</code><code>&gt;&lt;/div&gt;</code> <code>&lt;!--&nbsp;prop&nbsp;绑定。</code><code>"prop"</code>&nbsp;<code>必须在&nbsp;my-component&nbsp;声明&nbsp;--&gt;</code> <code>&lt;my-component&nbsp;:prop=</code><code>"someThing"</code><code>&gt;&lt;/my-component&gt;</code> <code>&lt;!--&nbsp;将父组件的&nbsp;props&nbsp;一起传给子组件&nbsp;--&gt;</code> <code>&lt;child-component&nbsp;v-bind=</code><code>"$props"</code><code>&gt;&lt;/child-component&gt;</code> <code>&lt;!--&nbsp;XLink&nbsp;--&gt;</code> <code>&lt;svg&gt;&lt;a&nbsp;:xlink:special=</code><code>"foo"</code><code>&gt;&lt;/a&gt;&lt;/svg&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

v-bind具体实例:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <code>&nbsp;</code><code>&lt;div&nbsp;id=</code><code>"app"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;v-bind&nbsp;绑定属性值的&nbsp;v-bind:属性名字&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;&lt;img&nbsp;v-bind:src=</code><code>"img_path"</code>&nbsp;<code>alt=</code><code>""</code><code>&gt;&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;a&nbsp;v-bind:href=</code><code>"'http://127.0.0.1:900/getone?id='+ids"</code><code>&gt;&lt;/a&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>app&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>Vue({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el:</code><code>'#app'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>img_path:</code><code>'./4-small.jpg'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ids:</code><code>'1'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

class绑定

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </td> 
 <td> <code>&lt;div&nbsp;id=</code><code>"app"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;&lt;div&nbsp;v-bind:style=</code><code>"{color:c,fontSize:s+'px'}"</code><code>&gt;hahah&nbsp;&lt;/div&gt;&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;v-bind&nbsp;简写形式&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;:style=</code><code>"[c,f]"</code><code>&gt;hahah&nbsp;&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>app&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>Vue({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el:</code><code>'#app'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>c:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:</code><code>'red'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>f:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fontSize:</code><code>'50px'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>