Vue.js 指令 v-bind：动态绑定数据到 HTML 属性

v-bind 是 Vue.js 中的一个指令，用于动态绑定数据到 HTML 元素的属性上。

使用 v-bind 指令的一般语法为：v-bind:属性名="数据"，也可以简写为：:属性名="数据"。

例如，你可以在 Vue 实例中声明一个数据属性，然后使用 v-bind 将该数据绑定到 HTML 元素的属性上：

new Vue({
  el: '#app',
  data: {
    imageUrl: 'https://example.com/image.jpg'
  }
})

在上面的例子中，v-bind 指令将 Vue 实例的 imageUrl 属性的值绑定到 img 元素的 src 属性上，实现了动态更新图片 URL 的效果。

除了绑定属性的值，v-bind 还可以绑定其他表达式，例如计算属性或方法的返回值：

  
Hello World

new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})

在上面的例子中，根据 isActive 属性的值，v-bind 指令动态地决定 p 元素是否添加 active 类名。

总结起来，v-bind 指令用于将 Vue 实例的数据与 HTML 元素的属性绑定在一起，实现动态更新的效果。