Vue 3 Class 与 Style 绑定

Class 与 Style 绑定

实验介绍

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 classstyle 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

Class 绑定

对象语法绑定方式

简而言之,就是我们可以给 HTML DOM 元素绑定类似 :class="{}" 这种格式的数据,然后经过 Vue 的渲染,就会渲染成多个类名了。

同样,我们在 src/views/TemplateM.vue

<template>
  <div class="template-m-wrap">
    <div class="static" :class="{'active': isActive, 'danger': isDanger}">
      默认样式
    </div>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return {
      isActive: true, // active 样式
      isDanger: fa
05-08 1906
05-06 2116
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值