uniapp小程序动态控制style

可以使用计算属性和条件渲染来动态控制style。

例如，假设我们想要根据一个变量isShow来控制一个元素的显示和隐藏，并且当它显示时，要设置它的背景色为红色，那么可以这样写：

<template>
  <view :style="getStyle"></view>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  },
  computed: {
    getStyle() {
      if (this.isShow) {
        return {
          backgroundColor: 'red'
        }
      } else {
        return {
          display: 'none'
        }
      }
    }
  }
}
</script>

这里使用了一个computed属性getStyle来返回一个对象，对象的属性根据isShow变量的值来决定。当isShow为true时，返回一个包含backgroundColor属性的对象，当isShow为false时，返回一个包含display属性的对象。getStyle属性被绑定到view元素的style上，这样就可以动态控制元素的显示和隐藏，以及背景色的设置了。