vue、uniapp中动态添加绑定style、class 9种方法实现

9种方法介绍

  1. 直接使用静态class和style属性:

    • 使用场景:当class和style属性是固定不变的时候,可以直接在模板中写死。
    • 优点:简单直接,没有额外的计算和逻辑。
    • 缺点:无法根据条件动态修改class和style。
  2. 使用v-bind动态绑定class和style属性:

    • 使用场景:当class和style属性需要根据组件的data或props属性动态变化时,可以使用v-bind来动态绑定。
    • 优点:可以根据条件动态修改class和style。
    • 缺点:需要在模板中写表达式,有一定的复杂度。
  3. 使用计算属性来动态生成class和style对象:

    • 使用场景:当class和style属性的计算逻辑比较复杂时,可以使用计算属性来生成class和style对象。
    • 优点:代码可读性好,逻辑清晰。
    • 缺点:需要定义额外的计算属性。
  4. 使用动态绑定的class和style属性:

    • 使用场景:当class和style属性的计算逻辑比较简单时,可以直接在模板中使用表达式来动态生成class和style字符串。
    • 优点:简洁明了,没有额外的计算属性。
    • 缺点:逻辑稍微复杂时,可读性会变差。
  5. 使用数组语法来动态绑定class属性:

    • 使用场景:当class属性需要根据多个条件动态变化时,可以使用数组语法来动态绑定class属性。
    • 优点:可以根据多个条件动态修改class。
    • 缺点:数组语法相对复杂,可读性较差。
  6. 使用动态绑定的style属性:

    • 使用场景:当style属性需要根据组件的data或props属性动态变化时,可以使用动态绑定的style属性。
    • 优点:可以根据条件动态修改style。
    • 缺点:需要在模板中写表达式,有一定的复杂度。
  7. 使用对象语法动态绑定class属性:

    • 使用场景:当class属性需要根据多个条件动态变化时,可以使用对象语法来动态绑定class属性。
    • 优点:可以根据多个条件动态修改class。
    • 缺点:对象语法相对复杂,可读性较差。
  8. 使用计算属性动态绑定style属性:

    • 使用场景:当style属性的计算逻辑比较复杂时,可以使用计算属性来动态绑定style属性。
    • 优点:代码可读性好,逻辑清晰。
    • 缺点:需要定义额外的计算属性。
  9. 使用动态绑定的class和style属性,通过在模板中使用数组和对象语法来动态生成class和style字符串:

    • 使用场景:当class和style属性需要根据多个条件动态变化时,可以使用数组和对象语法来动态绑定class和style属性。
    • 优点:可以根据多个条件动态修改class和style。
    • 缺点:语法相对复杂,可读性较差。

具体实现

在Uniapp和Vue中,可以使用以下9种方法来动态添加绑定style和class:

  1. 使用v-bind指令(或简写为:class:style)来动态绑定class和style属性。可以通过计算属性或直接在模板中使用三元表达式来根据条件动态设置class和style属性。
html 复制代码
<template>
  <div :class="{'active': isActive}" :style="{'color': textColor}">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>
  1. 使用v-bind指令(或简写为:class:style)来动态绑定class和style对象。可以在data中定义一个对象,根据条件动态设置class和style对象的属性。
html 复制代码
<template>
  <div :class="classObject" :style="styleObject">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-color': true
      },
      styleObject: {
        color: 'red',
        fontSize: '16px'
      }
    }
  }
}
</script>
  1. 使用计算属性来动态生成class和style对象。可以根据组件的data或props属性计算出class和style对象,并在模板中使用计算属性。
html 复制代码
<template>
  <div :class="computedClass" :style="computedStyle">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive,
        'text-color': this.textColor === 'red'
      }
    },
    computedStyle() {
      return {
        color: this.textColor,
        fontSize: '16px'
      }
    }
  }
}
</script>
  1. 使用动态绑定的class和style属性,通过在模板中使用表达式来动态生成class和style字符串。
html 复制代码
<template>
  <div :class="'active ' + (isActive ? 'active' : '')" :style="'color: ' + textColor">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>
  1. 使用数组语法来动态绑定class属性。可以在data中定义一个数组,根据条件动态设置class数组的元素。
html 复制代码
<template>
  <div :class="classArray">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isBold: true
    }
  },
  computed: {
    classArray() {
      return ['active', {'bold': this.isBold}]
    }
  }
}
</script>
  1. 使用动态绑定的style属性,通过在模板中使用对象语法来动态生成style字符串。
html 复制代码
<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>
  1. 使用对象语法动态绑定class属性。可以在data中定义一个对象,根据条件动态设置class对象的属性。
html 复制代码
<template>
  <div :class="classObject">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isBold: true
    }
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        bold: this.isBold
      }
    }
  }
}
</script>
  1. 使用计算属性动态绑定style属性。可以根据组件的data或props属性计算出style字符串,并在模板中使用计算属性。
html 复制代码
<template>
  <div :style="computedStyle">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  },
  computed: {
    computedStyle() {
      return `color: ${this.textColor}; font-size: ${this.fontSize}px;`;
    }
  }
}
</script>
  1. 使用动态绑定的class和style属性,通过在模板中使用数组和对象语法来动态生成class和style字符串。
html 复制代码
<template>
  <div :class="['active', { 'bold': isBold }]">Hello World</div>
  <div :style="[styleObject, { 'font-size': fontSize + 'px' }]">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      isBold: true,
      styleObject: {
        color: 'red'
      },
      fontSize: 16
    }
  }
}
</script>
相关推荐
苏打水com1 天前
前端框架深度解析:Vue.js 3 从 Composition API 到生态升级,解锁企业级开发新能力
vue
凡大来啦1 天前
v-for渲染的元素上使用ref
前端·javascript·vue.js
eggcode1 天前
Vue前端开发学习的简单记录
vue.js·学习
申朝先生1 天前
在vue3中对于普通数据类型是怎么实现响应式的
javascript·vue.js·ecmascript
2501_915106321 天前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式
excel1 天前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
2501_916013741 天前
iOS 推送开发完整指南,APNs 配置、证书申请、远程推送实现与上架调试经验分享
android·ios·小程序·https·uni-app·iphone·webview
北海-cherish1 天前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909061 天前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5