从零开始学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.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"><divclass="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的绑定，包括数据、属性、以及修饰符等，如果对你有帮助，请点个关注吧！谢谢！
版权申明
本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。
暂无评论数据