VUE学习——属性绑定

属性绑定,就是给html添加id、class这样类似的操作。

js 复制代码
<template>
  <div v-bind:id="dynamicId">
    <div v-bind:class="dynamicClass">Test</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        dynamicId:"dynamicId",
        dynamicClass:"dynamicClass"
      }
    }
  }
</script>

<style>
.dynamicClass{
  color: red;
  font-size: 16px;
}

</style>

对于属性绑定我们使用v-bind进行,日常中,我们可以简写:

html 复制代码
<div :class="dynamicClass">Test</div>

我们也可以绑定布尔值,当值为null或者undefind的时候,不生效。

绑定多个属性,我们可以将其封装在对象里。

javascript 复制代码
<template>
  <div v-bind="objectOfAttrs">绑定多个属性</div>
</template>

<script>
  export default{
    data(){
      return{
        objectOfAttrs:{
          id:'idName',
          class:'className'
        }
      }
    }
  }
</script>

<style>
.className{
  color: red;
  font-size: 16px;
}

</style>
相关推荐
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda5 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
本郡主是喵6 小时前
用 TypeScript 进行 Truffle 测试
学习·区块链
10年前端老司机6 小时前
Promise 常见面试题(持续更新中)
前端·javascript
武文斌777 小时前
复习总结最终版:单片机
linux·单片机·嵌入式硬件·学习
nueroamazing8 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
sealaugh329 小时前
AI(学习笔记第十二课) 使用langsmith的agents
人工智能·笔记·学习
QZ_orz_freedom9 小时前
学习笔记--事务管理
笔记·学习
WebDesign_Mu9 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html