在上一节中，我们学习了VueJS监控属性watch的用法，在本节我们将学习如何使用VueJS中的v-bind将HTML属性和数据进行绑定，包括绑定样式、绑定类以及其它一般的属性绑定，只需使用v-bind指令即可。
1、为什么使用v-bind指令？v-bind的用法下面我们看一个例子，解释我们为什么需要使用v-bind，以及什么时候使用v-bind指令进行数据绑定。

< !DOCTYPE html> < html lang="zh_CN"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title>VueJS使用v-bind进行数据绑定< /title> < script src="http://img.readke.com/220411/0Z4115229-0.jpg">< /script> < /head> < body> < div id="binding"> {{title}} < br/> < a href="http://www.srcmini.com/hreflink" target="_blank">点击< /a> < br/> < a href="http://www.srcmini.com/{{hreflink}}" target="_blank">点击< /a> < br/> < a v-bind:href="http://www.srcmini.com/hreflink" target="_blank">点击< /a> < br/> < /div> < script> var bind = new Vue({ el: "#binding", data: { title: "数据绑定", hreflink: "http://www.srcmini.com" } }); < /script> < /body> < /html>

在上面的例子中，有1个标题和3个a链接，其中使用vue实例中对a标签的href属性进行赋值。现在我们在浏览器查看一下这些赋值的结果，前两个a标签没有正确的href链接值，如下图：

文章图片
第一个点击链接值为hreflink，第二个为{{hreflink}}，第三个显示正确的url值。因而到这里我们可以知道为什么要使用v-bind指令，给HTML属性赋值，我们需要使用v-bind指令，使用的语法如下：

< a v-bind:href="http://www.srcmini.com/hreflink" target="_blank">点击< /a> < br/>

其中VueJS还提供了v-bind指令的简写形式，如下：

< a :href="http://www.srcmini.com/hreflink" target="_blank">点击< /a>

如果我们在浏览器查看这些v-bind元素，这些html标签不会显示v-bind属性，而是显示纯HTML，对DOM进行分析时，也看不到VueJS属性。
2、使用v-bind绑定样式html类class为了对象html的类class进行数据绑定，我们需要使用v-bind:class或者使用简写:class，下面我们看一个绑定类calss的例子：

< style> .active { background: red; } < /style> < div id = "bind"> < div v-bind:class = "{active:isactive}">< b>{{title}}< /b>< /div> < /div> < script type = "text/javascript"> var bind = new Vue({ el: '#bind', data: { title : "VueJS类绑定", isactive : true } }); < /script>

【VueJS指令v-bind、v-model和其它数据绑定全解】在以上的代码中，创建了一个div，其中添加了class属性，使用v-bind进行了绑定，即v-bind:class=”{active: isactive}”。在这里isactive的值为false或true，它的值会应用在div的calss上，在Vue数据对象中，我们将isactive赋值为true。另外，在style中定义了一个.active类，背景设置为红色。
这里进行数据绑定实现的是控制div的class是否使用，如果active为true则显示，否则不显示，下面是在浏览器中的显示效果：

文章图片
在上面的显示中，我们可以看到背景是红色的，也就是calss=”active”被应用到div中了。
下面我们改变isactive的值，更改为false，并查看浏览器中的输出，你可以在下图中看到，div的active类不被使用了：

文章图片
3、使用v-bind绑定多个类样式我们也可以给多个div添加calss属性，并使用添加v-bind属性数据绑定，如下例子：

style> .info { color: #00529B; background-color: #BDE5F8; }div { margin: 10px 0; padding: 12px; }.active { color: #4F8A10; background-color: #DFF2BF; }.displayError { color: #D8000C; background-color: #FFBABA; } < /style> < div id="bind"> < div class="info" v-bind:class="{ active: isActive, 'displayError': hasError }"> {{title}} < /div> < /div> < script type="text/javascript"> var vm = new Vue({ el: '#bind', data: { title: "VueJS类样式绑定", isActive: false, hasError: false } }); < /script>

在上面的代码例子中，我们使用了一个类info，其它类样式会根据isActive和hasError的值进行使用，下面是浏览器的输出：

文章图片
以上的普通的类样式的使用，两个变量isAcitive和hasError的值都为false，现在设置isActive为true，然后查看输出：

文章图片
在上面的显示中，在DOM中我们可以看到div有两个类了，info和active，下面我们设置hasError为true，将isActive设置为false，查看渲染效果：

文章图片
查看上图的输出，info和displayError样式应用在div上了，这就是我们根据条件使用多个类样式的例子。
4、v-bind将类样式作为数组传递我们还可以将多个类样式作为数组传递，看下面的例子看看是如何实现的：

< style> .info { color: #00529B; background-color: #BDE5F8; }div { margin: 10px 0; padding: 12px; font-size: 25px; }.active { color: #4F8A10; background-color: #DFF2BF; }.displayError { color: #D8000C; background-color: #FFBABA; } < /style> < div id="bind"> < div v-bind:class="[infoclass, errorclass]">{{title}}< /div> < /div> < script type="text/javascript"> var vm = new Vue({ el: '#bind', data: { title: "VueJS样式绑定例子", infoclass: 'info', errorclass: 'displayError' } }); < /script>

浏览器的显示如下：

文章图片
在上面的图中，我们可以看到div上有两个类，下面我们使用一个变量，根据变量的值分配类：

< div id="bind"> < div v-bind:class="[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}< /div> < /div> < script type="text/javascript"> var vm = new Vue({ el: '#bind', data: { title: "VueJS样式绑定例子", infoclass: 'info', errorclass: 'displayError', isActive: true, haserror: false } }); < /script>

在上面的代码中，增加了两个变量isActive和haserror，并应用到div上，在v-bind:class中使用三目运算符，如下：

< div v-bind:class="[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}< /div>

如果isActive为true则使用infoclass，haserror也是类似。上面代码中将isActive设置为true，haserror为false，则会显示infoclass，如下图：

文章图片
将haserro设置为true，isActive设置为false，则显示如下：

文章图片
5、v-bind组件样式绑定现在，我们将为组件中的类样式添加v-bind，在下面的示例中，我们已经向组件模板和组件添加了一个类。

< style> .info { color: #00529B; background-color: #BDE5F8; }div { margin: 10px 0; padding: 12px; font-size: 25px; }.active { color: #4F8A10; background-color: #DFF2BF; }.displayError { color: #D8000C; background-color: #FFBABA; } < /style> < div id="bind"> < new_component class="active">< /new_component> < /div> < script type="text/javascript"> var bind = new Vue({ el: '#bind', data: { title: "VueJS样式绑定例子", infoclass: 'info', errorclass: 'displayError', isActive: false, haserror: true }, components: { 'new_component': { template: '< div class = "info">组件样式绑定< /div>' } } }); < /script>

下面上面的例子在浏览器中的显示效果，对应的div使用了两个类样式：

文章图片
下面是用isActive变量控制组件的样式，代码如下：

< new_component v-bind:class="{active:isActive}">< /new_component>

因为该变量为false，因而只会用到info一个类，下面是显示效果

文章图片
6、v-bind绑定内联样式下面使用v-bind绑定内联样式的例子是直接操作每个样式属性值，下面是一般的用法例子：

< div id="bind"> < div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}< /div> < /div> < script type="text/javascript"> var bind = new Vue({ el: '#bind', data: { title: "绑定内联样式", activeColor: 'red', fontSize: '30' } }); < /script>

输出如下：

文章图片
在上面的例子中，对于div应用每个样式，并从Vue的数据对象中获取数据，这样可以在细节上动态更改每个样式，你可以将所有的样式封装成一个JavaScript对象，将这个对象作为data的成员，这样代码更加清晰干脆了。
7、v-model绑定表单输入到目前为止，在我们创建的例子中，我们已经看到v-model将输入文本元素和值绑定到指定的变量上，下面看更多关于绑定表单输入的例子。

< div id="bind"> < h3>绑定表单输入< /h3> < input v-model="name" placeholder="输入名字" /> < h3>输入的名字是: {{name}}< /h3> < hr /> < h3>Textarea< /h3> < textarea v-model="message" placeholder="添加详情">< /textarea> < h1> < p>{{message}}< /p> < /h1> < hr /> < h3>复选框< /h3> < input type="checkbox" id="checkbox" v-model="checked"> {{checked}} < /div> < script type="text/javascript"> var vm = new Vue({ el: '#bind', data: { name: '', message: '', checked: false } }); < /script>

我们在文本框中输入的内容如下所示，v-model输入框和name绑定，名称显示在{{name}}中，{{name}}显示在文本框中输入的任何内容。

文章图片
8、单选框和select下拉列表数据绑定

< div id="bind"> < h3>单选框< /h3> < input type="radio" id="black" value="http://www.srcmini.com/黑色" v-model="picked">黑色 < input type="radio" id="white" value="http://www.srcmini.com/白色" v-model="picked">白色 < h3>单选框选择: {{picked}} < /h3> < hr /> < h3>下拉select选择框< /h3> < select v-model="languages"> < option disabled value="">请选择一项< /option> < option>Java< /option> < option>Javascript< /option> < option>Php< /option> < option>C< /option> < option>C++< /option> < /select> < h3>选择的语言是: {{ languages }}< /h3> < hr /> < /div> < script type="text/javascript"> var bind = new Vue({ el: '#bind', data: { picked: '白色', languages: "Java" } }); < /script>

文章图片
9、修饰符绑定我们在下面的示例中使用了三个修饰词——trim、number和lazy。

< div id="bind"> < span style="font-size:25px; ">输入年龄: < /span> < input v-model.number="age" type="number"> < br /> < span style="font-size:25px; ">输入信息: < /span> < input v-model.lazy="msg"> < h3>显示信息: {{msg}}< /h3> < br /> < span style="font-size:25px; ">输入信息: < /span>< input v-model.trim="message"> < h3>显示信息: {{message}}< /h3> < /div> < script type="text/javascript"> var bind = new Vue({ el: '#bind', data: { age: 0, msg: '', message: '' } }); < /script>

文章图片
number修饰符：只允许输入数字，除此以外它将不允许任何其他输入。
lazy修饰符：lazy修饰符等到用户将焦点移开输入框后才显示。
trim修饰符：删除输入内容开头和结尾的所有空格

推荐阅读

• 

  社保卡发放城乡居民基本养老保险待遇 肇庆2月份起全面使用
• 

  山东麦收是几月份，麦收后种植什么经济作物
• 

  建筑工程技术主要考哪些证好考吗
• 

  海尔洗衣机不能洗涤是什么原因,主要差别在这里
• 

  手机|华为手机越做越大，越来越重；苹果则越来越小，越来越轻薄
• 

  PS制作另类高光黑白照片
• 

  掩于岁月敬而远之是什么意思
• 

  陈皮加枸杞泡水喝有什么作用
• 

  丝绸之路的意义是什么 关于丝绸之路的意义介绍
• 

  教师招聘体检哪些不合格不能通过
• 

  医生|又有患者不讲武德！医生“飞刀”手术后被举报：退还手术费还得道歉
• 

  如何把视频的声音提取成文字？视频转文字方法分享
• 

  做肝血管瘤介入有啥副作用,肝血管瘤介入手术有何并发症
• 

  如何刷机安卓手机,如何进行强制刷机?
• 

  Win10电脑的微软商店不见了怎么办？教你重新安装Microsoft Store详细方法
• 

  范忆琳个人资料 运动员范忆琳个人简介
• 

  爱玩mc官网 爱玩mc如何直播，爱玩mc联机装mod
• 

  Win7旗舰版打开文件提示安全警告怎么取消？
• 

  mongodb文件格式 mongodb写入文件
• 

  银耳泡后软粘是怎么回事

• 一个例子搞定！VueJS监控属性watch用法和例子详解
• VueJS计算属性computed用法全解教程
• 快速掌握Vue！VueJS组件Component完全使用教程详解
• VueJS模板template完全使用教程
• VueJS开发（Vue实例和组件component实例创建和原理详解）
• VueJS初次使用完全解析
• VueJS开发10个常见知识点整理和问题解析合集
• 当导入有模块的目录时，webpack出错，如何解决（）
• 在C和Java中找到给定链表的中间部分