我一直在尝试使用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 。问题是我不知道该怎么做。
这是我尝试在数据中使用数组的替代方法:使用setter函数使内容成为计算属性,在中使用单个字符串数据。像这样:
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)
现在,我该如何离开这里?如何从一组给定字符串中以特定间隔更改内容?
答案 0 :(得分:9)
我认为你可以使用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)
}
});