Vue 3 属性绑定(超详细)

更新时间 2023-05-10 09:58:48

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动

目前, 星球 内第一个项目:全栈前后端分离博客项目,演示地址:http://116.62.199.48/, 1.0 版本已经更新完毕,正在更新 2.0 版本。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 187 小节,累计 29w+ 字,讲解图:1263 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 720+ 小伙伴加入,欢迎点击围观

大家好,我是小哈。

本小节中,我们将学习如何在 Vue 3 中进行属性绑定功能。

什么是属性绑定?

属性绑定就是将视图页面中的标签属性和对应变量光联起来,当变量发生变化时,页面中的相关数据也会自动更新,无需手动操作 DOM 元素。

绑定属性值

v-bind 指令可用于绑定 HTML 属性,它们包括 classsrctitle 等等。语法格式如下:

<标签 v-bind:属性="值"></标签>

也可以通过 : 进行简写,格式如下:

<标签 :属性="值"></标签>

示例

以下是一个属性绑定的示例,我们定义了一个 <a> 标签,同时通过 v-bind 指令将 href 属性绑定到了 path 变量上:

<template>
  <div>
  
    <!-- 绑定属性 -->
    <a v-bind:href="path" style="display: block;">犬小哈教程</a>
    
    <!-- v-bind 指令简写模式 -->
    <a :href="path" style="display: block;">犬小哈教程</a>
  
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  // 定义一个 path 响应式变量,用于绑定 href 属性
  const path = ref('https://www.quanxiaoha.com')

</script>

运行结果如下:

绑定 CSS 样式

接下来,我们演示如何通过 v-bind 指令绑定样式类,示例代码如下:

<template>
  <div>

    <!-- 绑定样式, 如果 isActive 为 True 则 red 样式生效  -->
    <p><a class="bg-black" v-bind:class="{ red: isActive }">犬小哈教程</a></p>

  </div>
</template>

<script setup>
  import { ref } from 'vue'
  // 定义一个响应式变量
  const isActive = ref(true)

</script>

<style>
  .red {
    color: red;
  }
  
  .bg-black {
    background-color: black;
  }
</style>

在上面的代码中,当 isActive 变量值为 True 时,渲染结果为:

<a class="bg-black red">犬小哈教程</a>

效果图如下:

通过数组绑定多个 CSS 样式

也可以将一个数组传给 v-bind, 示例代码如下:

<template>
  <div>

    <!-- 通过数组同时绑定多个样式 -->
    <p><a v-bind:class="[classes.color, classes.background]">犬小哈教程</a></p>

  </div>
</template>

<script setup>
  import { reactive } from 'vue'

  const classes = reactive({
    color: 'red',
    background: 'bg-black'
  })
</script>

<style>
  .red {
    color: red;
  }

  .bg-black {
    background-color: black;
  }
</style>

通过三目运算绑定 CSS 样式

如果你想根据条件动态切换样式,也可以通过三目运算符来实现,示例代码如下:

<template>
  <div>

    <!-- 通过三目运算绑定样式, 如何 isActive 为 True 则应用 red 样式,否则为空样式 -->
    <p><a :class="isActive ? 'red' : ''">犬小哈教程</a></p>
    
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const isActive = ref(true)

</script>

<style>
  .red {
    color: red;
  }
</style>

运行效果如下: