vue

vue中动态添加style样式的写法有哪些

小亿
166
2024-03-08 15:02:24
栏目: 编程语言
Vue开发者专用服务器,限时0元免费领! 查看>>

  1. 使用对象语法:
<template>
  <div :style="dynamicStyles"></div>
</template>

<script>
export default {
  data() {
    return {
      dynamicStyles: {
        color: 'red',
        fontSize: '16px',
      }
    };
  }
};
</script>
  1. 使用数组语法:
<template>
  <div :style="[baseStyles, dynamicStyles]"></div>
</template>

<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'blue',
        fontSize: '14px',
      },
      dynamicStyles: {
        color: 'red',
        fontSize: '16px',
      }
    };
  }
};
</script>
  1. 使用计算属性:
<template>
  <div :style="computedStyles"></div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      fontSize: '16px',
    };
  },
  computed: {
    computedStyles() {
      return {
        color: this.color,
        fontSize: this.fontSize,
      };
    }
  }
};
</script>

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

相关推荐:vue中动态添加style样式的方法有哪些

0
看了该问题的人还看了