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

这篇具有很好参考价值的文章主要介绍了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:文章来源地址https://www.toymoban.com/news/detail-687361.html

  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>
  1. 使用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>
  1. 使用计算属性来动态生成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>
  1. 使用动态绑定的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>
  1. 使用数组语法来动态绑定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>
  1. 使用动态绑定的style属性,通过在模板中使用对象语法来动态生成style字符串。
<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对象的属性。
<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字符串,并在模板中使用计算属性。
<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字符串。
<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种方法实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue动态绑定class的几种方法

    一、对象语法 1、给v-bind:class 设置一个对象,可以动态地切换class,例如: 最终渲染结果: div class=\\\"active\\\"/div 2、对象中也可存在多个属性,动态切换class,:class 可以合class共存 最终渲染结果: div class=\\\"static active\\\"/div 3、当:class的表达式过长或逻辑复杂时,可以绑定一个计算

    2024年02月13日
    浏览(40)
  • vue2和vue3关于class类的绑定以及style的绑定的区别

    本篇为个人笔记 例如:单个类绑定 多个类绑定:   例如:单个绑定  多个绑定

    2024年02月16日
    浏览(43)
  • 视频讲解vue2基础之style样式class类名绑定

    目录  style样式的动态绑定 class类名动态绑定 一:官方给出的写法 二:自创三元表达式写法  详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定(小案例)_哔哩哔哩_bilibili 详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定

    2023年04月15日
    浏览(50)
  • Vue2 第五节 class与style绑定,条件渲染和列表渲染

    1.class与style绑定 2.条件渲染 3.列表渲染 (1)绑定class 就是用v-bind绑定一个class 有三种不同的写法 1. 字符串写法:适用于样式的类名不确定,需要动态指定    2.数组写法:适用于要绑定的个数个名字都不确定,数组中的样式连同class里面有的样式都会绑定到div中    3. 对象写

    2024年02月15日
    浏览(33)
  • vue 3 第二十七章:样式(动态class、动态style)

    在 Vue 中,我们可以使用动态绑定语法来动态地添加类名或样式。本章将介绍 Vue 3 中如何使用动态绑定语法来动态地添加类名或样式。 在 Vue 中,我们可以使用 :class 或 v-bind:class 指令来动态地添加类名。例如,下面的例子中,我们可以根据 isActive 的值动态地为元素添加 act

    2024年02月07日
    浏览(46)
  • 小程序原生动态style和class的方法

    原生小程序的动态绑定与vue的还是有区别的,记录下原生小程序的动态绑定style和class 动态绑定style 动态绑定class 然后就和正常的操作没什么区别了。。。

    2024年02月11日
    浏览(30)
  • class与 style绑定

    在Vue中,我们可以通过绑定不同的class来实现对元素的样式操作。Vue提供了多种方式来绑定HTML class,包括对象语法、数组语法以及在组件上使用class属性。 对象语法允许我们根据不同的条件来动态地添加或删除class。以一个按钮元素为例,我们可以使用v-bind指令来绑定一个对

    2024年02月15日
    浏览(38)
  • uniapp中微信小程序不能编译style绑定方法的解决方案

    这是我的代码设置了根据传参显示不同字体颜色和不同背景色 这两个方法我都写在methods中 在浏览器中H5和app模拟器的效果是一样的如图 在HbuildX中运行至微信开发者工具无效,并且报错如图 第一步 第二步 在computed添加如下代码 至此修改成功,微信开发者工具运行效果如图所

    2024年02月16日
    浏览(56)
  • 【vue】Vue中class样式的动态绑定

    简介: Vue 中 class 样式的绑定 1、字符串写法 使用场景 :样式的类型不确定 写法: 手动触发样式改变 注意:字符串使用的是vue实例data中已有的属性 2、对象写法 使用场景 :样式个数、类名确定,通过Bollean动态展示与否 写法: 对象写在内联样式 对象写在data中 3、数组写法

    2024年02月15日
    浏览(38)
  • vue中动态添加class修改div宽高无法触发addEventListener(“resize“)

    在触发事件动态修改class发现resize没有触发。 具体原因没有找到--------无语 因为不知道什么原因只能替代了,网上说resize消耗很大, MutationObserver与ResizeObserver 更节省性能。

    2024年02月12日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包