<template>
<div class="marquee">

      <div class="marquee_title">
                 <span>免費微報</span>
      </div>
        <div class="marquee_box">
                <ul class="marquee_list" :class="{marquee_top:animate}">
                        <li v-for="(item,index) in marqueeList">{{item.name}}</li>
                </ul>
        </div>
</div>
</template> 
<script>
export default {
  data() {
    return {
      animate: false,

      marqueeList: [
        {
          name: "1軍電視劇煩惱是的空間開發"
        },

        {
          name: "2軍水電費了羧甲澱粉鈉盛開"
        },

        {
          name: "3軍第三方庫收到貨否"
        },

        {
          name: "4軍杜師傅iOS"
        }
      ]
    };
  },
  created: function() {
    // 頁面顯示
    setInterval(this.showMarquee, 2000);
  },
  methods: {
    showMarquee: function() {
      this.animate = true;

      setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0]);

        this.marqueeList.shift();

        this.animate = false;
      }, 500);
    }
  }
};
</script>
 
<style scoped>
.marquee {
  width: 100%;

  height: 50px;

  align-items: center;

  color: #3a3a3a;

  background-color: white;

  display: flex;

  box-sizing: border-box;

  overflow: hidden;
}

.marquee_title {
  padding: 0 20px;

  height: 21px;

  font-size: 14px;

  border-right: 1px solid #d8d8d8;

  align-items: center;
}

.marquee_box {
  display: block;

  position: relative;

  width: 60%;

  height: 30px;

  overflow: hidden;
}

.marquee_list {
  display: block;

  position: absolute;

  top: 0;

  left: 0;
}

.marquee_top {
  transition: all 0.5s;

  margin-top: -30px;
}

.marquee_list li {
  height: 30px;

  line-height: 30px;

  font-size: 14px;

  padding-left: 20px;
}

.marquee_list li span {
  padding: 0 2px;
}
</style>

 

直接把上面的程式碼放到元件中去 然後把元件套在大元件中就可以了