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>
相关推荐
骁的小小站3 小时前
Verilator 和 GTKwave联合仿真
开发语言·c++·经验分享·笔记·学习·fpga开发
计算机学姐4 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
颜颜yan_6 小时前
UU远程——让工作、学习、娱乐跨设备无缝衔接,“远程”更像“身边”
学习·娱乐·远程工作
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js
YJlio8 小时前
Process Monitor 学习笔记(5.24):工具栏参考与高效快捷键指南
笔记·学习·php
deng-c-f8 小时前
Linux C/C++ 学习日记(30):协程(一):同步和异步、协程的简要介绍、用户态CPU调度的实现
学习·协程·同步/异步
小光学长9 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH9 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
hello kitty w9 小时前
Python学习(11) ----- Python的泛型
windows·python·学习
讽刺人生Yan9 小时前
RFSOC学习记录(五)带通采样定理
学习·fpga·rfsoc