被迫走上前端之路第二课之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>
相关推荐
前端付豪4 分钟前
1、为什么浏览器要有渲染流程? ——带你一口气吃透 Critical Rendering Path
前端·后端·浏览器
前端付豪7 分钟前
3、Node.js异步编程彻底吃透
前端·后端·node.js
孤鸿玉12 分钟前
[Flutter小试牛刀] 低配版signals,添加局部刷新
前端·flutter
亦黑迷失13 分钟前
轻量级 Express 服务器:用 Pug 模板引擎实现动态参数传递
前端·javascript·后端
吃瓜群众i1 小时前
理解Javascript闭包
前端·javascript
安大桃子1 小时前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
G扇子1 小时前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全