从一个例子来看我们为什么要利用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.jsvar 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.jsvar 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.jsvar 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.jsvar 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.jsvar 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.jsvar 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.jsvar 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.jsvar 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.jsvar vm = new Vue({ el: '#databinding', data: { age: 0, msg: '', message: '' }});
当我们利用了数字润色符之后，如number表示只能是数字，lazy表示在离开文本框后涌现显示，trim删除在开头和结尾输入的任何空格。
总结一下本篇我们先容了Vue的绑定，包括数据、属性、以及润色符等，如果对你有帮助，请点个关注吧！
感激！
