Vue 3 属性绑定(超详细)
一则或许对你有用的小广告
欢迎加入小哈的星球 ,你将获得:专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸:仿小红书(微服务架构)》 正在持续爆肝中,基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...
,点击查看项目介绍 ; - 《从零手撸:前后端分离博客项目(全栈开发)》 2 期已完结,演示链接: http://116.62.199.48/ ;
截止目前, 星球 内专栏累计输出 54w+ 字,讲解图 2476+ 张,还在持续爆肝中.. 后续还会上新更多项目,目标是将 Java 领域典型的项目都整一波,如秒杀系统, 在线商城, IM 即时通讯,权限管理,Spring Cloud Alibaba 微服务等等,已有 1900+ 小伙伴加入学习 ,欢迎点击围观
大家好,我是小哈。
本小节中,我们将学习如何在 Vue 3 中进行属性绑定功能。
什么是属性绑定?
属性绑定就是将视图页面中的标签属性和对应变量光联起来,当变量发生变化时,页面中的相关数据也会自动更新,无需手动操作 DOM 元素。
绑定属性值
v-bind
指令可用于绑定 HTML 属性,它们包括 class
、 src
、title
等等。语法格式如下:
<标签 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>
运行效果如下: