v-bind

从一个例子来看我们为什么要使用v-bind绑定：

//index.html
<!DOCTYPE html>
<html lang="en">
 <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>vue模板和组件</title>
 </head>
 <body>
 <div id="databinding">
 {{ title }}<br />
 <a href="hreflink" target="_blank"> Click Me </a> <br />
 <a href="{{ hreflink }}" target="_blank">Click Me </a> <br />
 <a v-bind:href="hreflink" target="_blank">Click Me </a> <br />
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 title: "数据绑定",
 hreflink: "http://www.google.com"
 }
});

当我们打开Chrome浏览器控制台的后发现，生成的html中只有第三个是对的，也就是说只有使用了v-bind的才真正的绑定了数据

绑定class

要绑定class 我们就需要用v-bind:class,我们还是直接看一个示例

//indedx.html
<style>
 .active {
 background: red;
 }
 </style>
 <div id="classbinding">
 <div v-bind:class="{active:isactive}">
 <b>{{ title }}</b>
 </div>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "CLASS BINDING",
 isactive: true
 }
});

代码中我们定义了一个.active，如果变量isactive是true则应用颜色，否则不应用

绑定多个class

同样的我们可以给html绑定多个class

//index.html
<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="classbinding">
 <div
 class="info"
 v-bind:class="{ active: isActive, 'displayError': hasError }"
 >
 {{ title }}
 </div>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "This is class binding example",
 isActive: false,
 hasError: false
 }
});

绑定数组

同样的我们可以绑定一个数组，代码如下

//index.html
<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="classbinding">
 <div v-bind:class="[infoclass, errorclass]">{{ title }}</div>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "This is class binding example",
 infoclass: 'info',
 errorclass: 'displayError'
 }
});

组件模板以及组件添加class

//index.html
<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="classbinding">
 <new_component class="active"></new_component>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "This is class binding example",
 infoclass: 'info',
 errorclass: 'displayError',
 isActive: false,
 haserror: true
 },
 components: {
 'new_component': {
 template: '<div class = "info">Class Binding for component</div>'
 }
 }
});

绑定style

我们也可以绑定style

//index.html
<div id="databinding">
 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
 {{ title }}
 </div>
 </div>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 title: "Inline style Binding",
 activeColor: 'red',
 fontSize: '30'
 }
});

分配一个style对象

//index.html
<div id = "databinding">
 <div v-bind:style = "styleobj">{{title}}</div>
</div>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 title : "Inline style Binding",
 styleobj : {
 color: 'red',
 fontSize :'40px'
 }
 }
 });

表单输入绑定

//index.html
 <div id="databinding">
 <h3>文本框</h3>
 <input v-model="name" placeholder="" />
 <h3>Name ：{{ name }}</h3>
 <hr />
 <h3>文本域</h3>
 <textarea v-model="textmessage" placeholder=""></textarea>
 <h1>
 <p>{{ textmessage }}</p>
 </h1>
 <hr />
 <h3>Checkbox</h3>
 <input type="checkbox" id="checkbox" v-model="checked" /> {{ checked }}
 <h3>Select</h3>
 <select v-model="languages">
 <option disabled value="">Please select one</option>
 <option>Java</option>
 <option>Javascript</option>
 <option>Php</option>
 <option>C</option>
 <option>C++</option>
 </select>
 <h3>{{ languages }}</h3>
 </div>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 name: '',
 textmessage: '',
 checked: false,
 languages: "Java"
 }
});

修饰符

//index.html
 <div id="databinding">
 <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>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 age: 0,
 msg: '',
 message: ''
 }
});

当我们使用了数字修饰符之后，如number表示只能是数字，lazy表示在离开文本框后出现显示，trim删除在开头和结尾输入的任何空格。

总结一下

本篇我们介绍了Vue的绑定，包括数据、属性、以及修饰符等，如果对你有帮助，请点个关注吧！谢谢！