网站开发培训-高端面授网站开发培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

HTML中为元素绑定Class属性与Style样式

  • 发布时间:
    2023-03-14
  • 版权所有:
    云和教育
  • 分享:

在实际开发中经常会遇到动态操作元素样式的需求。因此,vue 允许开发者通过 v-bind 属性绑定指令,为元素动态绑定 class 属性的值和行内的 style 样式。

1. 动态绑定 HTML 的 class

可以通过三元表达式,动态的为元素绑定 class 的类名。示例代码如下:

<h3 class="thin" :class="isItalic?'italic': ">MyDeep组件</h3>
<button @click="isItalic=!isItalic">Toggle Italic</button>

data() {
  return { isItalic: true }
}

.thin{ // 字体变细
  font-weight:200;
}
.italic{ // 倾斜字体
  font-style: italic;
}

2. 以数组语法绑定 HTML 的 class

如果元素需要动态绑定多个 class 的类名,此时可以使用数组的语法格式:

<h3 class="thin" :class="[isItalic ? 'italic' : '", isDelete ? 'delete' : '"]">
  MyDeep 组件
</h3>

<button @click="isItalic=!isItalic">Toggle Italic</button>
<button @click="isDelete=!isDelete">Toggle Delete</button>

data(){
  return {
    isItalic: true,
    isDelete: false,
  }
}

3. 以对象语法绑定 HTML 的 class

使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化:

<h3 class="thin" :class="class0bj">MyDeep 组件</h3>
<button @click="class0bj.italic = !class0bj.italic">Toggle Italic</button>
<button @click="class0bj.delete = !class0bj.delete">Toggle Delete</button>

data(){
  return {
    classobj:{ //对象中,属性名是class 类名,值是布尔值
      italic: true,
      delete: false,
    }
   }
}

4. 以对象语法绑定内联的 style

:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:

<div :style="{color: active, fontSize: fsize + 'px','background-color': bgcolor}">
黑马程序员
</div>
<button @click="fsize += 1">字号 +1</button>
<button @click="fsize -= 1">字号 -1</button>

data() {
  return {
    active: 'red',
    fsize: 30,
    bgcolor:'pink',
  }
}