做一個demo嘗試可以參照下面的連結（圖片路徑問題我是參照下面部落格解決的，當時現在本地做了一個demo）

說明：關於json檔案中引入圖片路徑的問題，在vue-cli 3.0版本以上static資料夾 由public資料夾代替

https://www.cnblogs.com/shun1015/p/15112191.html

專案中的運用，點選不同星級顯示不同的表情

<div v-show="levelStar !== 0" class="memes-collect">
          <StarLevelMemes
            ref="starData"
            :levelStar
 
="levelStar"
            :aniWidth="h5Width"
            :aniHeight="h5Height"
          ></StarLevelMemes>
          <div class="memes-text">{{ levelTextStar[levelStar - 1] }}</div>
        </div>

...

import StarLevelMemes from '@/components/starLevelMemes'
export default {
  name: 
 
'EveluateH5',
  components: {
    StarLevelMemes,
    
  },
  
  data() {
    return {
      value: 0,
      msg: '親愛的，請說些給老師的話吧！',
.......
      levelTextStar: [
        '老師再接再厲',
        '老師再接再厲',
        '老師加油哦',
        '老師加油哦',
        '老師太棒了'
      ],
.......
methods: {
    ...mapMutations({
      setIsReasonError: 
 
'FeedBack/setIsReasonError'
    }),
   //  一開始點選星星出來的表情並沒有動畫，看了一下官網，結合demo
發現每次要stop（）在呼叫play()就會播放,我是這麼處理的
        } else {
    onChange(value) {
      this.levelStar = value
      let {
        animOne,
        animSecond,
        animThree,
        animFour,
        animFive
      } = this.$refs.starData
      const animaArr = [animOne, animSecond, animThree, animFour, animFive]
      animOne.stop()
      animaArr.forEach((item, index) => {
        let curIndex = index
        if (value === ++curIndex) {
          item.play()
        } else {
          item.stop()
        }
      })
    ...........
    },

/components/starLevelMemes/index.vue

<template>
  <div class="levelContain">
    <div v-show="levelStar === levelOne" class="memes-icon">
      <Lottie
        :options="defaultOptionsOne"
        :height="aniHeight"
        :width="aniWidth"
        @animCreated="handleAnimationOne"
      />
    </div>
    <div v-show="levelStar === levelTwo" class="memes-icon">
      <Lottie
        :options="defaultOptionsSecond"
        :height="aniHeight"
        :width="aniWidth"
        @animCreated="handleAnimationSecond"
      />
    </div>
    <div v-show="levelStar === levelThree" class="memes-icon">
      <Lottie
        :options="defaultOptionsThree"
        :height="aniHeight"
        :width="aniWidth"
        @animCreated="handleAnimationThree"
      />
    </div>
    <div v-show="levelStar === levelFour" class="memes-icon">
      <Lottie
        :options="defaultOptionsFour"
        :height="aniHeight"
        :width="aniWidth"
        @animCreated="handleAnimationFour"
      />
    </div>
    <div v-show="levelStar === levelFive" class="memes-icon">
      <Lottie
        :options="defaultOptionsFive"
        :height="aniHeight"
        :width="aniWidth"
        @animCreated="handleAnimationFive"
      />
    </div>
  </div>
</template>

<script>
import Lottie from 'vue-lottie/src/lottie.vue'
import * as animationDataOne from '@/assets/eveluate/lotties/oneStar.json'
import * as animationDataSecond from '@/assets/eveluate/lotties/secondStar.json'
import * as animationDataThree from '@/assets/eveluate/lotties/threeStar.json'
import * as animationDataFour from '@/assets/eveluate/lotties/fourStar.json'
import * as animationDataFive from '@/assets/eveluate/lotties/fiveStar.json'
import { LEVEL_STAR_MEMES } from '@/constants/eveluate'

const { LEVEL_ONE, LEVEL_TWO, LEVEL_THREE, LEVEL_FOUR, LEVEL_FIVE } = LEVEL_STAR_MEMES

export default {
  name: 'StarLevelMemes',
  components: {
    Lottie
  },
  props: {
    newDisplayEvaluate: Boolean,
    contentData: Object,
    levelStar: {
      type: Number,
      default: 0
    },
    aniWidth: {
      type: Number,
      default: 164
    },
    aniHeight: {
      type: Number,
      default: 107
    }
  },
  data() {
    return {
      value: 0,
      defaultOptionsOne: { animationData: animationDataOne.default, loop: false },
      defaultOptionsSecond: { animationData: animationDataSecond.default, loop: false },
      defaultOptionsThree: { animationData: animationDataThree.default, loop: false },
      defaultOptionsFour: { animationData: animationDataFour.default, loop: false },
      defaultOptionsFive: { animationData: animationDataFive.default, loop: false },
      defaultOptions: [
        { animationData: animationDataOne.default },
        { animationData: animationDataSecond.default },
        { animationData: animationDataThree.default },
        { animationData: animationDataFour.default },
        { animationData: animationDataFive.default }
      ],

      msg: '親愛的，請說些給老師的話吧！',
      reasonList: [],
      isActive: false,
      activeIndex: -1,
      levelOne: LEVEL_ONE,
      levelTwo: LEVEL_TWO,
      levelThree: LEVEL_THREE,
      levelFour: LEVEL_FOUR,
      levelFive: LEVEL_FIVE,
      animOne: null,
      animSecond: null,
      animThree: null,
      animFour: null,
      animFive: null
    }
  },
  mounted() {

  },
  methods: {
    handleAnimationOne(anim) {
      this.animOne = anim
    },
    handleAnimationSecond(anim) {
      this.animSecond = anim
    },
    handleAnimationThree(anim) {
      this.animThree = anim
    },
    handleAnimationFour(anim) {
      this.animFour = anim
    },
    handleAnimationFive(anim) {
      this.animFive = anim
    }
  }
}
</script>

<style lang="less" scoped>
    .memes-icon {
      width: 164px;
      height: 107px;
    }
</style>

src/constants/eveluate.js

export const LEVEL_STAR_MEMES = {
  LEVEL_ONE: 1,
  LEVEL_TWO: 2,
  LEVEL_THREE: 3,
  LEVEL_FOUR: 4,
  LEVEL_FIVE: 5
}