VueJS 数据绑定
VueJS 数据绑定
在本章中,我们将学习如何操作HTML属性或为其赋值,如何更改样式,以及如何在VueJS中提供的名为v-bind的绑定指令的帮助下分配类。
让我们通过一个例子来理解为什么需要和何时使用v - bind指令进行数据绑定。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </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 type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { title : "DATA BINDING", hreflink : "http://www.google.com" } }); </script> </body> </html>
在上面的示例中,我们显示了一个标题变量和三个锚点链接。我们还从数据对象为href分配了一个值。
现在,如果我们在浏览器中检查输出并进行检查,我们将看到前两个锚链接没有正确的href,如下屏幕截图所示。
第一个clickme将href显示为hreflink,第二个clickme将hreflink显示为{ { hreflink } },而最后一个clickme将根据需要显示正确的URL。
因此,要为HTML属性赋值,我们需要使用指令v - bind对其进行绑定,如下所示。
<a v-bind:href = "hreflink" target = "_blank">Click Me </a>
VueJS还提供了v-bind的简写,如下所示。
<a :href = "hreflink" target = "_blank">Click Me </a>
如果在浏览器中看到inspect元素,则锚标记不会显示v-bind属性,但会显示纯HTML。当我们插入DOM时,没有看到任何VueJS属性。
绑定 HTML Classes
要绑定HTML类,我们需要使用v绑定:类。让我们考虑一个示例并在其中绑定类。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .active { background: red; } </style> <div id = "classbinding"> <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "CLASS BINDING", isactive : true } }); </script> </body> </html>
使用v-bind创建了一个div : class = { active : isactive }”。
这里,isactive是一个基于真或假的变量。它将活动的类应用于div。在数据对象中,我们将isactive变量赋值为true。样式中定义了一个类。活动,背景颜色为红色。
如果变量isactive为真,则不会应用颜色。以下是浏览器中的输出。
在上面的显示中,我们可以看到背景颜色是红色的。class= "active"应用于div。
现在,让我们将变量的值更改为false并查看输出。变量isactive将更改为false,如以下代码所示。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .active { background: red; } </style> <div id = "classbinding"> <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "CLASS BINDING", isactive : false } }); </script> </body> </html>
在上面的显示中,我们可以看到活动类没有应用于div。
我们还可以使用v绑定属性为HTML标记分配多个类。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <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> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", isActive : false, hasError : false } }); </script> </body> </html>
对于上面代码中的div,我们应用了一个普通类,例如class = " info "。基于isActive和hasError变量,其他类将应用于div。
输出
这是应用的普通类。这两个变量现在都是假的。让我们将isActive变量设为true并查看输出。
在上面的显示中,在DOM中,我们可以看到分配给div的两个类:“信息”和“活动”。让我们把hasError变量设为真,把isActive变量设为假。
现在,当我们在上面的显示中看到时,info和displayError类应用于div。这就是我们如何基于条件应用多个类。
我们还可以将类作为数组传递。让我们举个例子来理解这一点。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <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> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", infoclass : 'info', errorclass : 'displayError' } }); </script> </body> </html>
输出
如上所述,这两个类都应用于div。让我们使用变量,并根据变量的值分配类。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <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 = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", infoclass : 'info', errorclass : 'displayError', isActive : true, haserror : false } }); </script> </body> </html>
我们使用了两个变量isActive和haserror,同样的变量用于div,而类绑定如下面的div标记所示。
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
如果isActive为真,则将为其分配infoclass。haserror也是如此,如果它是true,则只有errorClass将应用于它。
现在,让我们将haserror变量设为true,将isActive变量设为false。
我们现在将为组件中的类添加v绑定。在下面的示例中,我们向组件模板以及组件添加了一个类。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <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> <script type = "text/javascript"> 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>' } } }); </script> </body> </html>
以下是浏览器中的输出。它将这两个类应用于最终的div
<div class = ”info active”></div>Final div
根据true / false在要显示的“组件”部分中添加变量。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <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 v-bind:class = "{active:isActive}"></new_component> </div> <script type = "text/javascript"> 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>' } } }); </script> </body> </html>
由于变量为false,因此不应用活动类,而是应用info类,如下屏幕截图所示。
绑定内联样式
对象语法
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { title : "Inline style Binding", activeColor: 'red', fontSize :'30' } }); </script> </body> </html>
输出
在上面的示例中,对于div,应用样式并从数据对象获取数据。
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div> data: { title : "Inline style Binding", activeColor: 'red', fontSize :'30' }
我们也可以通过将所有值分配给变量,然后将变量分配给div来执行相同的操作。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-bind:style = "styleobj">{{title}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { title : "Inline style Binding", styleobj : { color: 'red', fontSize :'40px' } } }); </script> </body> </html>
颜色和字体大小分配给名为styleobj的对象,同样的颜色和字体大小也分配给div。
<div v-bind:style = "styleobj">{{title}}</div>
输出
表单输入绑定
到目前为止,在我们创建的示例中,我们已经看到v - model绑定输入文本元素和绑定到指定变量的值。让我们在本节中了解更多信息。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <h3>TEXTBOX</h3> <input v-model = "name" placeholder = "Enter Name" /> <h3>Name entered is : {{name}}</h3> <hr/> <h3>Textarea</h3> <textarea v-model = "textmessage" placeholder = "Add Details"></textarea> <h1><p>{{textmessage}}</p></h1> <hr/> <h3>Checkbox</h3> <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}} </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { name:'', textmessage:'', checked : false } }); </script> </body> </html>
无论我们在texbox中键入什么,下面都会显示。v - model被分配了值名称,名称显示在{ { name } },它显示文本框中键入的任何内容。
输出
让我们看看更多的例子和如何使用它。
Radio组件和Select组件
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <h3>Radio</h3> <input type = "radio" id = "black" value = "Black" v-model = "picked">Black <input type = "radio" id = "white" value = "White" v-model = "picked">White <h3>Radio element clicked : {{picked}} </h3> <hr/> <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 Selected is : {{ languages }}</h3> <hr/> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { picked : 'White', languages : "Java" } }); </script> </body> </html>
输出
修改器
我们在示例中使用了三个修饰符- trim、number和lazy。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number"> <br/> <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg"> <h3>Display Message : {{msg}}</h3> <br/> <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message"> <h3>Display Message : {{message}}</h3> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { age : 0, msg: '', message : '' } }); </script> </body> </html>
输出
数字修改器仅允许输入数字。除了数字之外,它不接受任何其他输入。
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
Lazy修饰符将显示文本框中显示的内容,一旦它被完全输入并且用户离开文本框。
<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
Trim修改器将删除在开始和结束处输入的所有空格。
<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">