Vue.js 数据绑定
Vue.js支持不同类型的数据绑定。在学习Vue.js中的数据绑定之前，让我们看一下什么是数据绑定以及如何使用它。
什么是数据绑定？
数据绑定是一种用于将提供者和使用者的数据源绑定在一起并在检索时进行同步的技术。在数据绑定过程中，每当更改数据时，数据便会自动通过绑定到数据的元素反映出来。
术语数据绑定也用于元素中数据的外部表示发生变化的情况，并自动更新基础数据以反映此更改。
Vue.js class和样式绑定
在
Vue.js 数据绑定，我们必须操纵元素的类列表和内联样式。我们已经知道类列表和内联样式是属性，因此我们可以使用
v-bind 来处理它们。当我们将v-bind与类和样式一起使用时，Vue.js提供了特殊的增强功能。表达式还可以与字符串一起求值到对象或数组。
在这里，我们将学习如何在Vue.js绑定的帮助下操作或为HTML属性分配值，更改样式以及分配类。指令v-bind。让我们看一个简单的示例，以了解为什么和何时使用v-bind指令进行数据绑定。
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>{{title}}</h3>
<a href = "hreflink" target = "_blank"> Click Here </a> <br/>
<a href = "{{hreflink}}" target = "_blank">Click Here </a> <br/>
<a v-bind:href = "hreflink" target = "_blank">Click Here </a> <br/>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#databinding',
data: {
title : "Data Binding Simple Example",
hreflink : "https://www.lidihuo.com"
}
})
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
示例说明
在上面的示例中，您可以看到标题变量和三个锚链接如下:
<h3>{{title}}</h3>
<a href = "hreflink" target = "_blank"> Click Here </a> <br/>
<a href = "{{hreflink}}" target = "_blank">Click Here </a> <br/>
<a v-bind:href = "hreflink" target = "_blank">Click Here </a> <br/>
我们还为数据对象中的href分配了一个值hreflink:
" https://www.lidihuo.com" 。
如果您单击第一个"单击此处"链接，则该href会显示为hreflink，因此不会重定向到目标网址。
如果您单击第二个"单击此处"链接，则href会显示为{{hreflink}}，因此也不会重定向到目标URL。
只有第三个会重定向正确的目标URL，因为我们必须将其与 v-bind指令绑定。请参阅以下结果。
因此，要为HTML属性分配值，将其与v-bind指令绑定，如下所示:
<a v-bind:href = "hreflink" target = "_blank">Click Here</a>
您还可以使用简写形式包括v-bind指令，如下所示:
<a :href = "hreflink" target = "_blank">Click Here</a>
注意: 如果您检查结果的元素，您将看到anchor标签未显示v-bind属性。它显示纯HTML。当我们检查DOM时，可以看到Vue.js属性。
Vue.js HTML类绑定
在Vue.js中，我们可以绑定
HTML 类，方法是使用v-bind: class指令。让我们看一个示例来演示Vue.js中HTML类的绑定。
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
.active {
background: skyblue;
}
</style>
<div id = "classbinding">
<div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML class binding example",
isactive : true
}
})
程序执行后，您将看到以下输出:
输出:
在上面的示例中，我们使用
v-bind创建了一个div: class ="{active: isactive}" 。在这里，
不活动是基于正确或错误值的变量。这个isactive变量用于将class active应用于div。当我们将isactive变量分配为true时，它将显示我们在.active样式中定义的结果中指定的样式，背景颜色为天蓝色。 >为假，它将不会在结果中应用指定的样式。
Index.js文件:
var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML class binding example",
isactive : false
}
})
程序执行后，您将看到以下输出:
输出:
将多个类分配给HTML标签
您还可以将多个类分配给HTML标签v-bind属性的使用。请参见以下示例:
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/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 src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML multiple class binding example",
isActive : false,
hasError : false
}
})
程序执行后，您将看到以下输出:
输出:
在上面的示例中，您可以看到仅应用了普通类。目前其他两个变量均为假。现在，让我们看看将
isActive 变量设置为
true 时会发生什么:
var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML multiple class binding example",
isActive : true,
hasError : false
}
})
输出:
在上面的示例中，我们为div分配了两个类，即info和active。现在，让我们使
hasError 变量
true 和
isActive false ，然后查看结果。
var vm = new Vue({
el: '#classbinding',
data: {
title : "HTML multiple class binding example",
isActive : false,
hasError : true
}
})
输出:
现在，在上面的示例中，info和displayError类应用于div。这样便可以根据条件应用多个类。
使用数组分配多个类
我们还可以将类作为数组传递。请参见下面的示例以很好地理解这一点:
语法:
<div v-bind:class="[activeClass, errorClass]"></div>
示例:
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/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 src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#classbinding',
data: {
title : "Multiple classes with array example",
infoclass : 'info',
errorclass : 'displayError'
}
})
程序执行后，您将看到以下输出:
输出:
在上面的示例中，两个类均应用于div。
Vue.js内联样式绑定
对象语法
v-bind: style 的对象语法类似于
CSS ，但这是
JavaScript 目的。您可以使用camelCase或kebab-case(在kebab-case中使用引号)作为CSS属性名称:
HTML:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
CSS:
data: {
activeColor: 'red',
fontSize: 30
}
您还可以直接绑定样式对象以使模板更整洁。
HTML:
<div v-bind:style="styleObject"></div>
CSS:
data: {
styleObject: {
color: 'red',
fontSize: '30px'
}
}
让我们举个例子来清楚地理解这个概念。
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding Example",
activeColor: 'red',
fontSize :'30'
}
})
程序执行后，您将看到以下输出:
输出:
在上面的示例中，您可以看到div应用了样式，并且从数据对象中获取了数据。
您可以通过将所有值分配给变量，然后将变量分配给div来获取相同的结果。
示例:
Index.html文件:
<html>
<head>
<title>Vue.js Data Binding</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj">{{title}}</div>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding Example-2",
styleobj : {
color: 'red',
fontSize :'30px'
}
}
})
输出:
在上面的示例中，您可以看到颜色和fontSize被分配给名为styleobj的对象，而相同的对象被分配给div。
