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>
相关推荐
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
前端fighter9 天前
Vuex 与 Pinia:全面解析现代 Vue 状态管理的进化之路
前端·vue.js·面试
嘉琪0019 天前
2025——js 面试题
开发语言·javascript·ecmascript
snow@li9 天前
vue3-ts-qrcode :安装及使用记录 / 配置项 / 效果展示
前端·javascript·vue.js
海天胜景9 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui
伍哥的传说9 天前
React 轻量级状态管理器Zustand
前端·javascript·react.js·小程序·前端框架·ecmascript
烛阴9 天前
零依赖、零框架!纯JS快速掌握 JSON 转 CSV 技巧全攻略
前端·javascript