Vue 3 属性绑定(超详细)

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

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

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸:仿小红书(微服务架构)》 正在持续爆肝中,基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...点击查看项目介绍 ;
  • 《从零手撸:前后端分离博客项目(全栈开发)》 2 期已完结,演示链接: http://116.62.199.48/ ;

截止目前, 星球 内专栏累计输出 50w+ 字,讲解图 2200+ 张,还在持续爆肝中.. 后续还会上新更多项目,目标是将 Java 领域典型的项目都整一波,如秒杀系统, 在线商城, IM 即时通讯,权限管理,Spring Cloud Alibaba 微服务等等,已有 1700+ 小伙伴加入学习 ,欢迎点击围观

大家好,我是小哈。

本小节中,我们将学习如何在 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>

运行效果如下: