Vue 模板语法——属性绑定（1）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前面讲到的 Mustache 语法、v-text、v-html，都是将值插入到模板元素的内容中。

但是，除了内容需要动态决定，某些 HTML 属性也需要动态绑定：

• 比如动态绑定 a 元素的 href 属性；
• 比如动态绑定 img 元素的 src 属性；

那这些属性的值该如何绑定呢？

我们可以使用 v-bind 指令来绑定属性。

1. v-bind 介绍

• 缩写：:
• 预期：any (with argument) | Object (without argument)
• 参数：attrOrProp (optional)
• 修饰符：
  • .camel - 将 kebab-case attribute 名转换为 camelCase。
• 用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

2. v-bind 绑定常用属性

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值（这个后面讲组件时再介绍）。

在开发中，有哪些属性需要被动态绑定呢？

还是有很多的，比如图片的链接 src、网站的链接 href、类 class、样式 style 等等。

示例：

<!-- 绑定 src 属性到 imgUrl 表达式 -->
<img v-bind:src="imgUrl" alt="">
<!-- 绑定 href 属性到 link 表达式 -->
<a v-bind:href="link">中国航天科技集团有限公司</a>

完整代码：

<div id="app"></div>

<!-- Vue2 的 template 中只能有一个根元素 -->
<!-- Vue3 的 template 中是允许有多个元素的 -->
<template id="my-app">
  <!-- 绑定 src 属性到 imgUrl 表达式 -->
  <img v-bind:src="imgUrl" alt="">
  <!-- 绑定 href 属性到 link 表达式 -->
  <a v-bind:href="link">中国航天科技集团有限公司</a>
</template>

<script src="./js/vue.js"></script>
<script>
  const App = {
    data() {
      return {
        imgUrl: 'https://v3.cn.vuejs.org/logo.png',
        link: 'http://www.spacechina.com/'
      }
    },
    template: '#my-app'
  };

  Vue.createApp(App).mount('#app');
</script>

3. v-bind 语法糖

“语法糖”其实就是“简写（缩写）”的意思，v-bind: 可以简写为 :：

示例：

<img :src="imgUrl" alt="">

注意区分属性名前有 : 和没有 : 的区别哦，如果没有加 :：

<img src="imgUrl" alt="">

那么这里的 imgUrl 将会作为字符串赋值给 src 属性（而不是把对应组件实例中 imgUrl 属性的值赋给 src 属性）。