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"
  }
});

从零开始学Vue——绑定

当我们打开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
  }
});

从零开始学Vue——绑定

代码中我们定义了一个.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"><divclass="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"
 }
});

从零开始学Vue——绑定

修饰符

//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: ''
 }
});

从零开始学Vue——绑定

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

总结一下

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