javascript - 如何通过Vue.js每秒循环输出一个字符串数组

Question

假设这里有几个单词:apple、bpple、cpple

我想将它们显示为循环

第二个1:苹果然后第二个2:bpple然后3:cpple然后4:苹果...

就像动态更改'<div>value</div>'中的值一样每秒

我怎样才能实现这个目标？

Answer 1

据我了解您的问题，请尝试以下代码:

<div id="demo">
    <h2>{{myArray}}</h2>
    <h3>{{arrayItem}}</h3>
    <br>
    <button @click="startCircular()">start</button>
</div> 

javascript

var demo = new Vue({
    el: '#demo',
    data: {
        myArray:['apple','bpple','cpple'],
        arrayItem: ''
    },
    methods:{
        startCircular(){

            var i = 0;  // the index of the current item to show
            vm = this;
            setInterval(function() {            // setInterval makes it run repeatedly
                vm.arrayItem = vm.myArray[i++];
                if (i == vm.myArray.length) i = 0;   // reset to first element if you've reached the end
            }, 1000);        
        }    
    }
}) 

查看此处的演示 jsFiddle