当前阅读教程:Vue.JS入门教程 > 属性绑定 v-bind 指令 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 数据绑定 v-cloak指令 | 下一篇: Vue.js中提供了完全的JavaScript表达式支持 |
v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定。 示例以下实例判断 xianshi 的值,如果为 true 使用 bjheise类的样式,否则不使用该类: 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模板语法-属性绑定 v-bind 指令</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> <!--内部样式定义--> <style> /*定义黑色的背景,白色的字*/ .bjheise{ background-color:black; /*黑色背景*/ color: white;/*白色字*/ } </style> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--label通过for的值和input的id值都是"r1"来绑定--> <label for="r1">设置黑色背景,白色字体</label> <!--选中input的时候会改变变量"xianshi"的值为true,然后下面就会调用样式bjheise--> <input type="checkbox" v-model="xianshi" id="r1"> <br><br> <!--上面的input选中的时候,下面会显示黑色背景,白色的字--> <div v-bind:class="{'bjheise': xianshi}"> v-bind:class 指令 </div><br> <div> 默认的样式;没有使用v-bind指令 </div> </div> <script> new Vue({ el: '#app',//app为前面div区块的id的值,通过"#"号绑定 //data区域定义属性的值 data: { //变量初始化,点击input的时候值会在true和false之间切换 xianshi:false } }) </script> </body> </html> 效果图参考示例<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg> 后续小节我们会详细详解如何绑定普通样式,如何绑定内联样式。 |
|
上一篇: 数据绑定 v-cloak指令 | 下一篇: Vue.js中提供了完全的JavaScript表达式支持 |