vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uniapp动态绑定style、class

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

作者：一花一world

这篇文章主要介绍了vue、uniapp中动态添加绑定style、class 9种方法实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

9种方法介绍

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

2.使用v-bind动态绑定class和style属性：

3.使用计算属性来动态生成class和style对象：

4.使用动态绑定的class和style属性：

5.使用数组语法来动态绑定class属性：

6.使用动态绑定的style属性：

7.使用对象语法动态绑定class属性：

8.使用计算属性动态绑定style属性：

9.使用动态绑定的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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文