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>
相关推荐
2501_9160088915 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_9159214316 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
菜鸟una16 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
桃子不吃李子16 小时前
nextTick的使用
前端·javascript·vue.js
小二·18 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
前端 贾公子19 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
qq_4198540519 小时前
自定义组件(移动端下拉多选)中使用 v-model
前端·javascript·vue.js
你的电影很有趣19 小时前
lesson74:Vue条件渲染与列表优化:v-if/v-show深度对比及v-for key最佳实践
前端·javascript·vue.js
技术小丁19 小时前
uni-app 广告弹窗最佳实践:不扰民、可控制频次、含完整源码
前端·uni-app·1024程序员节
陶甜也20 小时前
ThreeJS曲线动画:打造炫酷3D路径运动
前端·vue·threejs