问题描述
有一个我想以随机顺序输出的列表.
我通过计算属性实现了这一点:
<ul><li v-for="list in randomList" >{{ 列表.文本 }}
<脚本>var vm = new Vue({el:'#app',数据:{列表:[{text:'js',value:'one'},{text:'css',value:'two'},{文本:'html',值:'三'}]},计算:{随机列表:函数(){return this.lists.sort(function(){return 0.5 - Math.random()});}}});
但如果我有多个列表,我想通过应用方法或过滤器来简化这个过程?
我尝试了一些方法但没有成功:
<ul><li v-for="list in randomList(lists)" >{{ 列表.文本 }}<ul><li v-for="name in randomList(names)" >{{ 名称.文本 }}
<脚本>var vm = new Vue({el:'#app',数据:{列表:[{text:'js',value:'one'},{text:'css',value:'two'},{文本:'html',值:'三'}],姓名:[{text:'mary',value:'one'},{text:'css',value:'two'},{文本:'html',值:'三'}]},方法: {随机列表:函数(兰特){return this.rand.sort(function(){return 0.5 - Math.random()});}}});
你的代码有几个小错误,一个错误是你的方法:randomList
,你正在使用 this.rand
其中 rand
作为参数传递,因此您只需要通过 rand
访问它,使用 this.rand
它将看起来进入vue实例数据,会报错:
类型错误:this.rand 未定义[了解更多]
查看工作小提琴 此处
代码:
方法:{随机列表:函数(兰特){return rand.sort(function(){return 0.5 - Math.random()});}}
你在这里有一个错字:el:'#vapp',
=> 这应该是 el:'#app',
Have a list that i want to output in random order.
I achieved this with computed property:
<div id="app">
<ul>
<li v-for="list in randomList" >
{{ list.text }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
lists:[
{text:'js',value:'one'},
{text:'css',value:'two'},
{text:'html',value:'three'}
]
},
computed: {
randomList: function(){
return this.lists.sort(function(){return 0.5 - Math.random()});
}
}
});
</script>
But if i have more than one list i that want to simplify this process by applying methods or filters?
I tried with methods without success:
<div id="app">
<ul>
<li v-for="list in randomList(lists)" >
{{ list.text }}
</li>
</ul>
<ul>
<li v-for="name in randomList(names)" >
{{ name.text }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
lists:[
{text:'js',value:'one'},
{text:'css',value:'two'},
{text:'html',value:'three'}
],
names:[
{text:'mary',value:'one'},
{text:'css',value:'two'},
{text:'html',value:'three'}
]
},
methods: {
randomList: function(rand){
return this.rand.sort(function(){return 0.5 - Math.random()});
}
}
});
</script>
There are few minor errors with your code, One error is in your method: randomList
, you are using this.rand
where rand
is passed as parameter, so you just need to access it via rand
, with this.rand
it will look into vue instance data and will give following error:
See working fiddle here
Code:
methods: {
randomList: function(rand){
return rand.sort(function(){return 0.5 - Math.random()});
}
}
You have one typo here: el:'#vapp',
=> this shoud be el:'#app',
这篇关于Vue.js 正确随机排序 v-for 循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!