用 setInterval 替换 vue.js 模板

Question

我一直在尝试使用 vue.js 在给定的时间间隔内刷新 div 的内容，但到目前为止几乎没有成功。这是我目前所拥有的：

var vm = new Vue({
    el: '#feature',
    template: '<div id={{content}}></div>',
    data:
        featureList: [{
            content: 'a'
        }, {
            content: 'b'
        }, {
            content: 'c'
        }]
    }
});

在我的 html 上，我有以下内容：

<div id="feature"></div>

我这里的方法是遍历这个数组，并以给定的时间间隔替换模板中的 content。问题是我不确定该怎么做。

这是我在 data 中尝试使用数组的替代方法：使用 content 计算属性一个 setter 函数，在 data 中有一个字符串。像这样：

var vm = new Vue({
  el: '#feature',
  template: '<div id={{content}}></div>',
  data: {
    content: 'a'
  },
  computed: {
    setTemplate: {
      set: function(newValue) {
      var values= newValue
      this.content = values
      }
    }
  }
});

vm.setTemplate = 'c'

(jsfiddle here)

现在，我该怎么办？如何以特定间隔更改一组给定字符串的 content？

Answer 1

我认为你可以为此使用 lifecycle hooks，特别是 ready 挂钩：

var vm = new Vue({
    el: '#feature',
    template: '<div id={{content}}>{{content}}</div>',
    data: {
        content: 'hi there',
        features: ['a', 'b', 'c'],
        currentIndex: 0
    },

    created: function() {
        var self = this
        setTimeout(function cycle() {
            self.content = self.features[self.currentIndex++]
            self.currentIndex %= self.features.length
            setTimeout(cycle, 2000)
        }, 2000)
    }
});

参见the updated fiddle。

用 setInterval 替换 vue.js 模板

Replacing vue.js template with setInterval

javascript

vue.js