Vue 属性绑定

简介

在 HTML 的属性中，双大括号插值表达式不能直接使用，为了在 Vue3 中动态地绑定属性，可以使用指令 v-bind。

它支持绑定多种属性类型：class、style、value、href 等，也可简写为 : 来代替 v-bind。

属性绑定的主要用途是在模板中根据数据的变化动态地更新 DOM 元素的属性。

这样可以使得页面的展示和交互更具动态性。通过属性绑定，可以根据不同的数据状态或用户行为来动态地修改元素的属性，使得页面具有更灵活的表现形式。

语法示例

以下为 v-bind 的语法使用示例。

<!-- 完整语法 -->
<div v-bind:属性名="属性值"></div>
<!-- 缩写 -->
<div :属性名="属性值"></div>

绑定单个属性

v-bind 可以绑定多种类型的属性，下面是绑定属性值类型为 字符串，布尔和整型的代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp 和 ref
      const { createApp, ref } = Vue;

      window.onload = function () {
        createApp({
          setup() {
            const baidu = ref("https://www.baidu.com");
            const bing = ref("https://cn.bing.com/");
            const readonlyState = ref(true)
            const size = ref(20)
            return {
              baidu,
              bing,
              readonlyState,
              size
            };
          },
        }).mount("#app");
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!-- v-bind完整写法 跳转到百度首页 -->
      <p><a v-bind:href="baidu">访问百度</a></p>
      <!-- v-bind缩写形式  跳转到必应首页-->
      <p><a :href='bing'>访问必应</a></p>

      <!-- 绑定 布尔类型 -->
      <p><input type="text" value='输入看看' :readonly="readonlyState"> 只读状态为{{readonlyState}}</p>
      <!-- 指定宽度 -->
      <p><input type="text" :size="size"> 输入框的宽度为 {{size}} </p>
    </div>
  </body>
</html>

实现效果如下图所示，页面实现了对两个链接的跳转、对输入框只读的设置和输入框宽度的绑定：

绑定多个属性

v-bind 也可以实现对同一属性多个值的绑定，借助响应式变量和响应式对象来实现，语法如下所示：

// 响应式变量
const 变量名=ref("属性名A: 属性值A;属性名B: 属性值B");
// 响应式对象
const 对象名=ref({
          "属性名A":"属性值A",
          "属性名B":"属性值B"
          })

单属性多值的设置常用于 style 属性，它用于直接指定元素的行内样式，允许我们在标签中动态地设置元素的外观。

通过绑定 style 属性，我们可以在Vue中灵活地调整页面元素的样式，实现动态化的页面效果。

通过绘制两个不同背景色和边框色的正方形，展示如何用两种形式绑定变量，代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp和ref
      const { createApp, ref } = Vue;

      window.onload = function () {
        createApp({
          setup() {
            // 使用响应式变量 定义图像的背景色和边框色 
            const colorBorder = ref("background-color:blue;border: 1px solid #000");
            // 使用响应式对象 定义图像的宽高和位置
            const widthHeight = ref({
              "width": "100px",
               "height": "100px",
               "margin-top": "120px"

            })
            return {
              colorBorder,
              widthHeight
            };
          },
        }).mount("#app");
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!-- 绑定图像的背景色和边框颜色 -->
      <div style="width: 100px; height: 100px;" 
      v-bind:style="colorBorder">
      <!-- 绑定图像的大小和位置 -->
      <div style="background-color:yellow;border: 1px solid #cdcdcd" 
      :style="widthHeight">

    </div>
  </body>
</html>

运行结果如下图所示，页面成功绘制出了两个正方形，并且成功绑定了实例中定义的变量和对象中的样式：

总结

本节介绍的 v-bind 是Vue中用于动态绑定属性的指令，它使得我们可以灵活地修改标签的属性。而简写形式 : 则使得代码更加简洁和优雅。