javascript - Comment implémenter le tri v-for="n in 10", la valeur par défaut est de 1 à 10, comment implémenter le tri de 10 à 1 ?
習慣沉默
習慣沉默 2017-05-19 10:25:39
0
7
727

v-for="n in 10" Comment implémenter le tri ? La valeur par défaut est de 1 à 10. Comment implémenter de 10 à 1 ?

習慣沉默
習慣沉默

répondre à tous(7)
滿天的星座

Si tu veux passer de 10 à 1, ne suffirait-il pas de 11 - n...
Pourquoi es-tu si droit...

巴扎黑

Le questionneur n'a pas écrit la balise vue, mais j'ai vu l'instruction v-for. Le questionneur devrait demander comment utiliser vue pour organiser 1 à 10 dans l'ordre inverse.
Supposons qu'il existe le composant vue suivant


      var vm = new Vue({
            el: '#app',
            template: `
                    <ul>
                    <li v-for="item in arr">loop {{item}}</li>
                    </ul>
                   
                   `,
            
            filters: {
                
            },
            data() {
                return {
                    arr:10,
        
                }
        
            },
        
        })
        
        

1.Utiliser le filtre

filters: {
        sort(v) {
            if (!v)
                return ''
            else {
                return 11 - v
            }
        },
        template:`<ul><li v-for="item in arr">{{item|sort}}</li></ul>`

2.Utilisation de la méthode vue

 template: `
            <ul>
            <li v-for="item in arr">{{reverseNumber(item)}}</li>
            </ul>
           
           `,
            methods: {
        reverseNumber(x) {
            return 11 - x
        },
        }

Il n'y a aucun moyen d'utiliser des attributs calculés pour parcourir un nombre comme celui-ci. Les attributs calculés se produisent lorsqu'une valeur dans data est modifiée, et son mappage à une autre valeur équivaut à une fonction, et >v-for Il parcourt les données de la liste, ce qui équivaut à un itérateur, et ne modifie pas une certaine valeur d'attribut des données. data中一个值改变后,把他映射到另外一个值相当于一个函数,而v-for是循环了列表的数据相当于一个迭代器,并没有改变数据data的某个属性值。


建议你循环一个数组或对象,不要直接循环数字。除非逻辑真的很简单,就是循环生成几个标签。把一个数组元素排序你还可以采用,sort()传入倒序排序函数,这样就可以用计算属性,先映射排序数组到计算属性,然后v-for

Il est recommandé de boucler un tableau ou un objet au lieu de boucler directement des nombres🎜. À moins que la logique ne soit vraiment simple, elle génère simplement plusieurs balises en boucle. Pour trier un élément du tableau, vous pouvez également utiliser sort() pour transmettre la fonction d'ordre inverse, afin de pouvoir utiliser l'attribut calculé. Mappez d'abord le tableau trié à l'attribut calculé, puis v-forcode> boucle le calcul de la propriété d'ordre inverse. L'ordre inverse peut également être mis en œuvre. 🎜 🎜Dans les cas simples, je recommande d'utiliser des filtres, qui sont des pipelines angulaires🎜
给我你的怀抱

Ensuite, vous devez créer un tableau pour stocker 10~1

滿天的星座

Vous pouvez utiliser des attributs calculés. Pour plus de détails, voir [Portal] dans la méthode de tri js. Si vous ne comprenez pas le tri, voir

.

【Ici】

Ty80

S'il est en vue, vous pouvez également envisager d'utiliser des filtres pour convertir

仅有的幸福
<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 méthodes : 1. Utiliser le filtre 2. Calculer les attributs 3. Événement de méthodes Le traitement de l'événement 11-n est relativement simple

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal