v-bind是什么？
在 Vue.js 中，v - bind是一个指令，用于响应式地绑定 HTML 元素的特性（attributes）。以下是详细介绍：
基本用法
v - bind最常见的用途是绑定元素的href、src、class、style等特性。例如，动态绑定a标签的href属性：
收起
html
<template>
<a v - bind:href="linkUrl">点击我</a>
</template>
<script>
export default {
data() {
return {
linkUrl: 'https://www.example.com'
};
}
};
</script>
在上述代码中，linkUrl是 Vue 实例data中的数据属性，v - bind:href会将a标签的href属性绑定到linkUrl的值上。
缩写形式
v - bind有一个更简洁的缩写形式，即冒号（:）。所以上面的代码可以写成：
收起
html
<template>
<a :href="linkUrl">点击我</a>
</template>
绑定对象和数组
-
绑定 class 特性：可以通过绑定一个对象来动态切换多个 CSS 类。例如：
收起
html
<template>
<div :class="{active: isActive, 'text - red': hasError}">这是一个div</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
};
}
};
</script>
当isActive为true时，active类会被添加到div元素上；当hasError为true时，text - red类会被添加。
-
绑定 style 特性：可以绑定一个对象或数组来设置内联样式。例如绑定对象：
收起
html
<template>
<div :style="{color: textColor, fontSize: fontSize + 'px'}">这是一个div</div>
</template>
<script>
export default {
data() {
return {
textColor: 'blue',
fontSize: 16
};
}
};
</script>
v - bind使得 Vue.js 中的数据和 DOM 元素的特性能够建立响应式联系，当绑定的数据发生变化时，对应的 DOM 特性也会自动更新。
