Vue基础第四章 - v-bind指令
1、v-bind指令介绍
在前端开发过程中最常做的事莫过于class类名的绑定与style内联样式的修改，Vue中使用v-bind指令来实现这两个需求，在第二章中给出过简单的示例，下面我们来看一下v-bind指令的具体用法。
2、绑定class类名的三种方法
2.1、对象绑定法
所谓对象就是类似Python中的字典，以键值对的形式来动态控制一个class是否加载，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app1">
<!--:class等价于v-bind:class,:class可以与普通class同时存在，此处通过：class的对象中的isActive和isError的值来控制active和error类是否加载，最后的渲染结果为<div class="static active"></div>--> <div class="static" :class="{'active':isActive,'error':isError}"></div> </div> <script> var app1=new Vue({ el:'#app1', data:{ isActive:true, isError:false } }); </script> </body> </html>
当对象中的class类较多时，可以使用计算属性或methods属性来绑定，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app1"> <div class="static" :class="classes"></div> </div> <script> var app1=new Vue({ el:'#app1', data:{ isActive:true, isError:false }, computed:{ classes:function() { return {active:this.isActive ,error:this.isError} } } }); </script> </body> </html>
2.2、数组绑定法
数组绑定法就是给:class绑定一个数组，将data属性中的class类名引用到数组中，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app">
<!--经过渲染后active和error类会被应用到div标签上--> <div :class="[activeCls,errorCls]"></div> </div> <script> var app=new Vue({ el:'#app', data:{ activeCls:'active', errorCls:'error' } }) </script> </body> </html>
使用数组绑定法时可以通过三元表达式来动态控制class类是否应用，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app">
<!--此处error类将始终应用，active类将根据isActive的真假来控制是否应用--> <div :class="[isActive ? activeCls : '',errorCls]"></div> </div> <script> var app=new Vue({ el:'#app', data:{ isActive:true, activeCls:'active', errorCls:'error' } }) </script> </body> </html>
三元表达式虽然可以动态控制class类是否应用，但是写起来比较复杂，为了在数组绑定法中能够动态控制class的应用与否我们还可以利用上面的对象绑定法，在数组绑定法中嵌套使用对象绑定法，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app"> <div :class="[{'active':isActive},errorCls]"></div> </div> <script> var app=new Vue({ el:'#app', data:{ isActive:true, errorCls:'error' } }) </script> </body> </html>
与对象绑定法一样，我们也可以在数组绑定法中使用计算属性来绑定class类，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app"> <div :class="classes"></div> </div> <script> var app=new Vue({ el:'#app', data:{ size:'large', disabled:true }, computed:{ classes:function() {
<!--此处btn类始终应用，由于size值为large不为空，根据字符串拼接btn-large类被应用，当disabled为真时，btn-disabled类被应用--> return ['btn',{['btn-'+this.size]:this.size !='',['btn-disabled']:this.disabled}] } } }) </script> </body> </html>
2.3、组件绑定
我们可以在自定义Vue组件时在组件上应用class类，然后在调用该组件时再使用对象绑定法或数组绑定法在组件上继续绑定新的class类，在调用组件时绑定class类的方法只有当组件最外层是根元素才有效，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script>Vue.component('my-component',{template:'<p class='article'>自定义组件</p>'})；</script> <title>Vue 示例</title> </head> <body> <div id="app"> <my-component:class="[activeCls,errorCls]"></my-component> </div> <script> var app=new Vue({ el:'#app', data:{ activeCls:'active', errorCls:'error' } }) </script> </body> </html>
3、绑定内联样式
v-bind绑定内联样式的方法与绑定class类名的方法一致，也是使用对象绑定法和数组绑定法，其中对象绑定法在绑定内联样式时较为常用，另外还有计算属性在绑定内联样式时也较为常用，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app">
<!--v-bind渲染内联样式的语法糖为:style,此处渲染后的效果为<div style="color:red;font-size:14px;">文本</div>--> <div :style="styles">文本</div> </div> <script> var app=new Vue({ el:'#app', data:{
<!--css属性名称使用驼峰命名或短横分隔命名--> styles:{ color:'red', fontSize:14+'px' } } }) </script> </body> </html>
