被迫走上前端之路第二课之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>
相关推荐
wangshuai09272 分钟前
vue中process.env.NODE_ENV设置方法
vue.js
JarvanMo15 分钟前
在 Flutter 中正确处理文本缩放
前端
深蓝电商API17 分钟前
HTML 解析入门:用 BeautifulSoup 轻松提取网页数据
前端·爬虫·python·beautifulsoup
excel36 分钟前
JavaScript 运算符与 Vue 中的 1 << n 应用
前端
上单带刀不带妹1 小时前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
史上最菜开发1 小时前
a-input输入框,苹果电脑(MAC)输入法的输入Bug
vue.js·macos·bug
怕冷的火焰(~杰)1 小时前
yarn安装electron和better-sqlite3失败问题(rebuild:better-sqlite3)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能优化:7个90%开发者不知道的V8引擎黑科技
前端·人工智能·后端
摸鱼的春哥1 小时前
“全栈模式”必然导致“质量雪崩”!和个人水平关系不大
前端·javascript·后端
Eme丶2 小时前
Nginx部署vue以及转发配置记录
前端·vue.js·nginx