在Vue和uni-app中，可以通过以下9种方式动态添加绑定的style和class。

1. 使用数组的语法绑定多个样式对象。
2. 使用对象语法直接绑定到对象。
3. 使用数组的语法绑定多个类名。
4. 使用三元表达式切换类。
5. 使用对象语法绑定类。
6. 使用数组的语法绑定多个样式。
7. 使用数据属性绑定样式。
8. 使用计算属性绑定样式。
9. 使用方法返回样式字符串。

以下是每种方法的示例代码：

<template>
  <view>
    <!-- 方法1 -->
    <view :style="[styleObject1, styleObject2]"></view>
 
    <!-- 方法2 -->
    <view :style="{ color: active ? 'red' : 'green' }"></view>
 
    <!-- 方法3 -->
    <view :class="[isActive ? 'active' : '', 'static']"></view>
 
    <!-- 方法4 -->
    <view :class="[isActive ? 'active' : 'inactive']"></view>
 
    <!-- 方法5 -->
    <view :class="{ active: isActive, 'text-success': hasSuccess }"></view>
 
    <!-- 方法6 -->
    <view :style="[baseStyles, overridingStyles]"></view>
 
    <!-- 方法7 -->
    <view :style="{ fontSize: fontSize + 'px' }"></view>
 
    <!-- 方法8 -->
    <view :style="computedStyle"></view>
 
    <!-- 方法9 -->
    <view :style="styleMethod"></view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      active: true,
      isActive: true,
      hasSuccess: true,
      fontSize: 16,
      styleObject1: {
        color: 'red',
        fontSize: '14px'
      },
      styleObject2: {
        backgroundColor: 'blue'
      },
      baseStyles: {
        color: 'red',
        fontSize: '14px'
      },
      overridingStyles: {
        backgroundColor: 'blue'
      }
    };
  },
  computed: {
    computedStyle() {
      return {
        color: this.active ? 'red' : 'green',
        fontSize: '16px'
      };
    }
  },
  methods: {
    styleMethod() {
      return 'color: ' + (this.active ? 'red' : 'green') + '; font-size: 16px;';
    }
  }
};
</script>
 
<style>
.active {
  color: green;
}
.static {
  background-color: yellow;
}
.inactive {
  color: red;
}
.text-success {
  color: green;
}
</style>

在这个例子中，我们定义了一个组件，它使用了不同的方法来动态绑定样式和类。这些方法涵盖了常用的场景，包括条件渲染类名和样式，以及使用计算属性和数据属性。

// render.js
import L from 'leaflet';
import 'leaflet-echarts';
 
export default {
  props: {
    // 接收外部传递的参数
    mapData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      map: null,
      tileLayer: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map('map', {
        center: [this.mapData.center.lat, this.mapData.center.lng],
        zoom: this.mapData.zoom,
        zoomControl: false,
        attributionControl: false
      });
 
      this.tileLayer = L.tileLayer(this.mapData.url, {
        maxZoom: this.mapData.maxZoom,
        minZoom: this.mapData.minZoom
      }).addTo(this.map);
 
      // 监听地图视图变化事件
      this.map.on('moveend', () => {
        const center = this.map.getCenter();
        this.$emit('update:center', { lat: center.lat, lng: center.lng });
        this.$emit('update:zoom', this.map.getZoom());
      });
    }
  }
};

这段代码定义了一个Vue组件，它在mounted钩子中初始化了Leaflet地图，并设置了地图的中心点、缩放级别以及TileLayer图层。同时，它还监听了地图的moveend事件，当地图的中心点或者缩放级别变化时，通过$emit触发事件来更新父组件中的数据。这样做既保证了地图的交互性，也实现了地图数据与应用状态的同步。

以下是一个简单的uniapp+vue+css手写步骤条组件的示例代码：

<template>
  <view class="step-container">
    <view
      class="step"
      v-for="(item, index) in steps"
      :key="index"
      :class="{'active': index === activeStep}"
    >
      <view class="step-number">
        <text v-if="index < activeStep || (index === activeStep && !isLastStep)">✓</text>
        <text v-else>{{ index + 1 }}</text>
      </view>
      <view class="step-text">{{ item }}</view>
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    steps: {
      type: Array,
      default: () => ['步骤1', '步骤2', '步骤3']
    },
    activeStep: {
      type: Number,
      default: 0
    }
  },
  computed: {
    isLastStep() {
      return this.activeStep === this.steps.length - 1;
    }
  }
};
</script>
 
<style scoped>
.step-container {
  display: flex;
  align-items: center;
}
 
.step {
  display: flex;
  align-items: center;
  font-size: 14px;
  position: relative;
  padding: 10px 20px;
  color: #757575;
}
 
.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e0e0e0;
  margin-right: 10px;
}
 
.step-text {
  white-space: nowrap;
}
 
.active {
  color: #005f69;
}
 
.active .step-number {
  background-color: #005f69;
  color: #fff;
}
 
.active .step-number text {
  font-size: 20px;
}
</style>

这个组件接收两个props：steps 和 activeStep。steps 是一个包含步骤描述的数组，activeStep 是当前激活步骤的索引。组件使用计算属性 isLastStep 来判断是否是最后一个步骤，从而显示不同的图标。CSS样式定义了步骤条的外观和感觉。