从零开始学Vue——绑定
本文我们将介绍如何操作或赋值给html属性,更改样式
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的绑定,包括数据、属性、以及修饰符等,如果对你有帮助,请点个关注吧!谢谢!
