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

更新时间：2023年09月02日 10:34:58 作者：一花一world

这篇文章主要介绍了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属性。

<template>
  <div :class="{'active': isActive}" :style="{'color': textColor}">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

2.使用v-bind指令（或简写为:class和:style）来动态绑定class和style对象。可以在data中定义一个对象，根据条件动态设置class和style对象的属性。

<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>

3.使用计算属性来动态生成class和style对象。可以根据组件的data或props属性计算出class和style对象，并在模板中使用计算属性。

<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>

4.使用动态绑定的class和style属性，通过在模板中使用表达式来动态生成class和style字符串。

<template>
  <div :class="'active ' + (isActive ? 'active' : '')" :style="'color: ' + textColor">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

5.使用数组语法来动态绑定class属性。可以在data中定义一个数组，根据条件动态设置class数组的元素。

<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>

6.使用动态绑定的style属性，通过在模板中使用对象语法来动态生成style字符串。

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

7.使用对象语法动态绑定class属性。可以在data中定义一个对象，根据条件动态设置class对象的属性。

<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>

8.使用计算属性动态绑定style属性。可以根据组件的data或props属性计算出style字符串，并在模板中使用计算属性。

<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>

9.使用动态绑定的class和style属性，通过在模板中使用数组和对象语法来动态生成class和style字符串。

<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>

到此这篇关于vue、uniapp中动态添加绑定style、class 9种方法实现的文章就介绍到这了,更多相关uniapp动态绑定style、class内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Nuxt.js之自动路由原理的实现方法
这篇文章主要介绍了Nuxt.js之自动路由原理的实现方法，nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值，需要的朋友可以参考下
2018-11-11
vue render函数动态加载img的src路径操作
这篇文章主要介绍了vue render函数动态加载img的src路径操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
如何使用vite搭建vue3项目详解
Vite 是一个面向现代浏览器的更轻,更快的web应用开发工具,下面这篇文章主要给大家介绍了关于如何使用vite搭建vue3项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
使用命令行工具npm新创建一个vue项目的方法
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。下面小编给大家分享使用命令行工具npm新创建一个vue项目的方法，需要的朋友参考下吧
2017-12-12
vue echarts实现横向柱状图
这篇文章主要为大家详细介绍了vue echarts实现横向柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue prop传值类型检验方式
这篇文章主要介绍了vue prop传值类型检验方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
深入浅析vue组件间事件传递
最近的工作需要用到vue，所以最近接触最多的就是vue，下面小编给大家介绍下vue组件间事件传递，需要的朋友参考下吧
2017-12-12
使用vuex存储用户信息到localStorage的实例
今天小编就为大家分享一篇使用vuex存储用户信息到localStorage的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue如何获取下拉框中选中的value值和label值
这篇文章主要介绍了Vue如何获取下拉框中选中的value值和label值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue实现水波涟漪效果的点击反馈指令
鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动，这些效果也被统称为点击反馈，虽然看似是应用中的细枝末节，但是只要稍微投入一点点心思，带来的用户体验提升是十分明显的,这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。
2021-05-05

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

目录

9种方法介绍

具体实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具