根据动态数据绑定动态类

假设我们有一个动物列表需要展示，不同类型的动物显示不同的颜色。

思路

1. v-bind:class 的值是一个方法，方法返回不同的类名；
2. JS 中定义方法；
3. CSS 中定义不同的类；

   举例

   <div v-for="(item, index) in animals">
   <div :class="colorChange(item.name)">{{ item.name }}</div>
   </div>

   colorChange(e) {
   switch(e) {
    case 0:
      return 'primary'
    case 1:
      return 'success'
    case 2:
     return 'error'
    case 3:
      return 'warning'
   }
   }
   

   阻止子元素触发父元素的事件

   使用 vue 的事件修饰符解决，对子元素事件添加 stop 修饰符，组织子元素的事件传播

   <view @click.stop="doClick"></view>
   

   父组件在子组件抛出的事件中，传递自己的参数

• 子组件

  <div>
    <button @click="$emit('click',value)"></button>
  </div>
  

• 父组件

  <child-component @click="click($event,0)></child-component>
  <child-component @click="click($event,1)></child-component>
  <child-component @click="click($event,2)></child-component>
  

  click(e,index){
  // e对应的是子组件中抛出的value参数，index则是父组件中的0，1，2的值
  }
  

  参考

• https://stackoverflow.com/a/43210564/13430829

• vue阻止子元素触发父元素的事件，事件冒泡处理