扫码关注官方订阅号
v-for="n in 10" 怎样实现排序,默认是1到10,从10到1怎么实现?
想从10到1,直接11 - n不就行了吗…… 干嘛这么耿直……
11 - n
题主没有写vue标签但是我看到了v-for指令.题主应该是问怎么用vue实现1-10倒序排列。假设有如下一个vue组件
var vm = new Vue({ el: '#app', template: ` <ul> <li v-for="item in arr">loop {{item}}</li> </ul> `, filters: { }, data() { return { arr:10, } }, })
1.采用filter
filters: { sort(v) { if (!v) return '' else { return 11 - v } }, template:`<ul><li v-for="item in arr">{{item|sort}}</li></ul>`
2.采用vue方法
template: ` <ul> <li v-for="item in arr">{{reverseNumber(item)}}</li> </ul> `, methods: { reverseNumber(x) { return 11 - x }, }
这样的循环一个数字是没有办法采用计算属性的,计算属性是data中一个值改变后,把他映射到另外一个值相当于一个函数,而v-for是循环了列表的数据相当于一个迭代器,并没有改变数据data的某个属性值。
data
v-for
建议你循环一个数组或对象,不要直接循环数字。除非逻辑真的很简单,就是循环生成几个标签。把一个数组元素排序你还可以采用,sort()传入倒序排序函数,这样就可以用计算属性,先映射排序数组到计算属性,然后v-for循环倒序排列的计算属性。也可以实现倒序排列。
那你需要自建一个数组存放10~1
可以用计算属性,具体看【传送门】,传入js的排序方法sort,不懂sort看
【这里】
如果是vue里面,还可以考虑用过滤器filters转换
<select> <option v-for="n in 21" :value="22-n">{{22-n}}</option> </select> <select> <option v-for="n in 21" :id="22-n">{{22-n}}</option> </select> 这两段,为什么上面这个value值就没有用,而id就可以呢?
3种方法:1.采用filter过滤 2.计算属性 3.methods事件 处理事件11-n比较简单的
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
想从10到1,直接
11 - n
不就行了吗……干嘛这么耿直……
题主没有写vue标签但是我看到了v-for指令.题主应该是问怎么用vue实现1-10倒序排列。
假设有如下一个vue组件
1.采用filter
2.采用vue方法
这样的循环一个数字是没有办法采用计算属性的,计算属性是
data
中一个值改变后,把他映射到另外一个值相当于一个函数,而v-for
是循环了列表的数据相当于一个迭代器,并没有改变数据data的某个属性值。建议你循环一个数组或对象,不要直接循环数字。除非逻辑真的很简单,就是循环生成几个标签。把一个数组元素排序你还可以采用,sort()传入倒序排序函数,这样就可以用计算属性,先映射排序数组到计算属性,然后
v-for
循环倒序排列的计算属性。也可以实现倒序排列。简单的情况下我推荐用过滤器,也就是angular的管道
那你需要自建一个数组存放10~1
可以用计算属性,具体看【传送门】,传入js的排序方法sort,不懂sort看
【这里】
如果是vue里面,还可以考虑用过滤器filters转换
3种方法:1.采用filter过滤 2.计算属性 3.methods事件 处理事件11-n比较简单的