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>
相关推荐
四喜花露水4 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy13 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
怀旧66620 分钟前
spring boot 项目配置https服务
java·spring boot·后端·学习·个人开发·1024程序员节
web Rookie43 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
infiniteWei1 小时前
【Lucene】原理学习路线
学习·搜索引擎·全文检索·lucene
follycat2 小时前
[极客大挑战 2019]PHP 1
开发语言·学习·网络安全·php
程序员爱技术5 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会6 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子6 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass