在本章中，将学习如何操作或赋值给HTML属性，改变样式，以及借助VueJS提供的v-bind的绑定指令来分配类。
通过下面一个例子来理解为什么需要以及何时使用v-bind指令进行数据绑定。创建一个文件：binding.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs绑定数据示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
{{title}}<hr/>
<a href = "hreflink" target = "_blank"> 点击我 </a> <br/>
<a href = "{{hreflink}}" target = "_blank"> 点击我 </a> <br/>
<a v-bind:href = "hreflink" target = "_blank">易百教程 </a> <br/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "数据绑定",
hreflink : "http://www.yiibai.com"
}
});
</script>
</body>
</html>
在上面的例子中，显示了一个标题变量和三个锚链接。还从数据对象中为href赋值。现在，如果在浏览器中查看输出并检查，将会看到前两个锚链接没有正确的href，如下面的截图所示。
第一个链接的href属性的值显示为hreflink，第二个链接的href属性的值为{{hreflink}}，而最后一个显示正确的url：http://www.yiibai.com 。
因此，要为HTML属性赋值，需要按如下方式将其绑定到指令v-bind。如下语句 -
<a v-bind:href = "hreflink" target = "_blank">Click Me </a>
VueJS还提供了v-bind指令的简写，如下所示。
<a :href = "hreflink" target = "_blank">Click Me </a>
如果在浏览器中看到检查元素，那么定位标记不会显示v-bind属性，但它会显示纯HTML。 当我们查看DOM时，没有看到VueJS属性。
绑定HTML类
要绑定HTML类，需要使用v-bind:class。 下面来看看一个例子，并在其中绑定类。创建一个文件：bind-classes.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs绑定数据示例</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 : "绑定HTML类",
isactive : true
}
});
</script>
</body>
</html>
有一个用使用v-bind: class=” {active: isactive}”创建的div。
在这里，isactive是一个基于true/false的变量。它会将活动类应用于div。 在数据对象中，已经将isactive变量赋值为true。 在样式.active中定义了一个类，背景色为红色(red)。
如果变量isactive是true，则颜色将被应用，否则不会被应用。以下将是浏览器中的输出 -
在上面的显示中，可以看到背景颜色是红色的。class ="active"应用于div。
现在，将变量的值更改为false并查看输出。 如下面的代码所示，将变量isactive更改为false -
示例一
创建一个文件：binding-example.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs绑定数据示例</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 : "这是一个类绑定示例~",
isActive : false,
hasError : false
}
});
</script>
</body>
</html>
对于上面代码中的div，已经应用了一个普通的类，例如class ="info"。 基于isActive和hasError变量，其他类将被应用于div。显示效果如下 -
这是一个正常的类应用。这两个变量现在都是false。让isActive变量为true并查看输出 -
在上面的显示中，在DOM中可以看到两个类被分配给div，info和active。 让hasError变量为true，isActive为c。效果如下 -
现在，在上面的显示中看到，info和displayError类被应用于div。这就是如何根据条件应用多个类。
也可以将类作为数组传递。 让我们举个例子来理解这一点。
示例二
创建一个文件：binding-example2.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs绑定数据示例</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 : 18px;
}
.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 : "这是一个类绑定示例2~",
infoclass : 'info',
errorclass : 'displayError'
}
});
</script>
</body>
</html>
输出结果如下 -
正如上面看到的，这两个类都被应用到div。使用一个变量，并根据变量的值，分配类。
修改上面文件：** 中的代码为 -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs绑定数据示例</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 : 18px;
}
.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>
现在，将haserror变量设置为true，将isActive变量设置为false。效果如下 -
下面将为组件中的类添加v-bind。 在下面的例子中，我们已经向组件模板和组件添加了一个类。
创建一个文件：binding-for-component.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;
font-size : 18px;
}
.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 : "这是一个类绑定示例",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">为组件绑定类</div>'
}
}
});
</script>
</body>
</html>
以下是浏览器中的输出，它将这两个类应用于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，所以不应用active类，并按照以下屏幕截图所示应用info类。
绑定内联样式
创建一个文件：binding-inline-styles.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs绑定数据示例</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来做同样的事情。
创建一个文件：binding-inline-styles2.html -
<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>
color和fontSize分配给名为styleobj的对象，同样的分配给div。
<div v-bind:style = "styleobj">{{title}}</div>
在浏览器中输出结果如下 -
表单输入绑定
到目前为止，在前面创建的例子中，已经看到v-model绑定输入文本元素和绑定到指定变量的值。下面将了解表单输入绑定。
创建一个文件：form-input-bindings.html -
<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"/>
<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>
无论在输入框中键入的内容是什么，v-model都会被分配值给name，它显示在{{name}}域中，在下面也会显示在文本框中输入的内容。
单选和下拉项
创建一个文件：form-radio-select.html -
<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>
在浏览器中浏览如下 -
number修饰符 只允许输入数字。 除了数字之外，不会有其他的输入。
<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">
`
