被迫走上前端之路第二课之vue的v-bind属性绑定

在 Vue 中,双大括号只能用于文本插值。为了给 attribute 绑定一个动态值,需要使用 v-bind指令

语法

html 复制代码
<div v-bind:id="dynamicId"></div>

这里,在id属性前面加上v-bind指令表明id可随着dynamicId定义动态改变。它们是 Vue 模板语法的一部分。和文本插值类似,指令的值是可以访问组件状态的 JavaScript 表达式。

冒号后面的部分 (:id) 是指令的"参数"。此处,元素的 id attribute 将与组件状态里的 dynamicId 属性保持同步。

简写语法:

html 复制代码
<div :id="dynamicId"></div>

举个栗子

动态改变组件样式

html 复制代码
<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
const changeClolor=()=>{
  titleClass.value="other"
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
  <button @click="changeClolor">
    {{"点击我改变颜色"}}
  </button>
</template>

<style>
.title {
  color: red;
}
.other{
  color: green;
}
</style>
相关推荐
卿·静1 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia15 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia17 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub20 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw23 分钟前
hippy的主要原理
前端
子兮曰26 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068826 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97629 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖29 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript
北辰alk30 分钟前
React 组件间数据共享全方位指南:从 Props 到状态管理
前端