vue3 attribute绑定

在 Vue3 中,Attribute 绑定是一个核心概念,用于将组件的数据动态绑定到 HTML 元素的属性上。最常用的方式是使用 v-bind 指令,也可以使用简写形式 :

基本用法

  1. 完整语法 (v-bind)

vue

xml 复制代码
<template>
  <img v-bind:src="imageUrl" />
</template>

<script setup>
const imageUrl = "https://picsum.photos/200/300"
</script>
  1. 简写语法 (:)

vue

xml 复制代码
<template>
  <img :src="imageUrl" />
</template>

动态绑定多个属性

可以使用对象语法同时绑定多个属性:

vue

xml 复制代码
<template>
  <div :attrs="divAttributes"></div>
</template>

<script setup>
const divAttributes = {
  id: "my-div",
  class: "container",
  title: "这是一个容器"
}
</script>

绑定 class 和 style 的特殊处理

Vue 对 classstyle 有特殊处理,可以使用对象或数组语法:

vue

xml 复制代码
<template>
  <!-- class 绑定 -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  
  <!-- style 绑定 -->
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
</template>

<script setup>
const isActive = true
const hasError = false
const textColor = "red"
const fontSize = 16
</script>

布尔属性绑定

对于布尔属性(如 disabledchecked),Vue 会根据绑定值的真假来决定是否添加该属性:

vue

xml 复制代码
<template>
  <button :disabled="isDisabled">点击我</button>
  <input type="checkbox" :checked="isChecked" />
</template>

<script setup>
const isDisabled = true  // 按钮会被禁用
const isChecked = true   // 复选框会被选中
</script>

动态属性名

可以使用方括号语法绑定动态的属性名:

vue 复制代码
<template>
  <div :[attributeName]="value"></div>
</template>

<script setup>
const attributeName = "data-id"
const value = 100
</script>

以上代码会渲染为:<div data-id="100"></div>

通过 Attribute 绑定,Vue 实现了数据与视图的响应式关联,当数据发生变化时,对应的属性值也会自动更新。

相关推荐
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅7 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_7 小时前
Chrome开发者工具
前端·chrome
YiHanXii7 小时前
this 输出题
前端·javascript·1024程序员节
楊无好7 小时前
React中ref
前端·react.js
程琬清君7 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1007 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔667 小时前
flutter实现web端实现效果
前端·flutter
csj507 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
刘新明19898 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节