uniapp小程序动态控制styly

在uniapp小程序中，可以通过动态绑定style属性来控制样式。

在模板中使用v-bind绑定style属性。

例如，为一个div元素绑定背景色和字体大小：

<template>
  <div :style="{ backgroundColor: bgColor, fontSize: fontSize + 'px' }">Hello, World!</div>
</template>

在数据中定义样式属性。

例如，在data中定义背景色和字体大小：

<script>
export default {
  data() {
    return {
      bgColor: 'red',
      fontSize: 16
    }
  }
}
</script>

在方法中动态改变样式属性。

例如，在点击事件中改变背景色和字体大小：

<template>
  <div :style="{ backgroundColor: bgColor, fontSize: fontSize + 'px' }" @click="changeStyle">Hello, World!</div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: 'red',
      fontSize: 16
    }
  },
  methods: {
    changeStyle() {
      this.bgColor = 'blue';
      this.fontSize = 20;
    }
  }
}
</script>

这样，点击div元素后，背景色变为蓝色，字体大小变为20px。