3.1. vue 单行文字自动跑马灯效果 · 前端demo

```js <style> p { width: 400px; overflow: hidden; /* 单行显示 */ white-space: nowrap; /* 字体超出加'...' */ text-overflow: ellipsis; } </style> <body> <p id="app"> {{ msg }} </p> <script> new Vue({ el: '#app', data() { return { msg: '粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。', } }, created() { this.move(); }, methods: { move() { // 箭头函数解决 this 指向问题 var timer = setInterval(() => { var start = this.msg.slice(0, 1); var end = this.msg.slice(1); this.msg = end + start; }, 400) } }, }) </script> </body>