v-for="n in 10" How to implement sorting? The default is 1 to 10. How to implement sorting from 10 to 1?
滿天的星座2017-05-19 10:27:39
If you want to go from 10 to 1, wouldn’t it be enough to just 11 - n
...
Why are you so upright...
巴扎黑2017-05-19 10:27:39
The questioner did not write the vue tag, but I saw the v-for instruction. The questioner should be asking how to use vue to arrange 1-10 in reverse order.
Suppose there is the following vue component
var vm = new Vue({
el: '#app',
template: `
<ul>
<li v-for="item in arr">loop {{item}}</li>
</ul>
`,
filters: {
},
data() {
return {
arr:10,
}
},
})
1.Use filter
filters: {
sort(v) {
if (!v)
return ''
else {
return 11 - v
}
},
template:`<ul><li v-for="item in arr">{{item|sort}}</li></ul>`
2.Using vue method
template: `
<ul>
<li v-for="item in arr">{{reverseNumber(item)}}</li>
</ul>
`,
methods: {
reverseNumber(x) {
return 11 - x
},
}
There is no way to use calculated attributes to loop through a number like this. The calculated attribute is data
中一个值改变后,把他映射到另外一个值相当于一个函数,而v-for
which is equivalent to an iterator after looping through the list data, and does not change a certain attribute value of the data.
It is recommended that you loop an array or object instead of looping numbers directly. Unless the logic is really simple, it just generates several tags in a loop. To sort an array elements, you can also use sort() to pass in the reverse order function, so that you can use calculated properties. First map the sorted array to the calculated properties, and then loop through the calculated properties in reverse order. Reverse order can also be implemented. v-for
滿天的星座2017-05-19 10:27:39
You can use calculated attributes, see [Portal] for details, pass in the js sorting method sort, if you don’t understand sort, check it out
【Here】
仅有的幸福2017-05-19 10:27:39
<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就可以呢?
高洛峰2017-05-19 10:27:39
3 methods: 1. Use filter 2. Calculate attributes 3. Methods event Processing event 11-n is relatively simple