communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Comment augmenter ou diminuer dynamiquement les options de vote dans vue.js?
某草草
某草草 2017-05-19 10:33:35
0
1
763

Dans le passé, dans jquery, le DOM d'une option de vote était écrit manuellement dans une chaîne, puis lorsque le bouton "Ajouter un élément" était cliqué, la méthode append était utilisée pour ajouter le DOM. Puis-je demander comment implémenter cette fonction dans vue.js ?

某草草
某草草

répondre à tous(1)
滿天的星座
滿天的星座2017-05-19 10:35:35 1 plancher

Vous pouvez lire davantage de la documentation officielle de Vue et comprendre en profondeur le concept de liaison de données. Passons directement à l'exemple :

. 
<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Vue</title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <p id="app">
        <p>投票</p>
        <template v-for="(item, index) in options">
            <input type="radio" name="vote" :value="item" v-model="vote">
            <label for="vote">选项{{ index }}</label>
        </template>
        <p>
            <button @click="newOption">增加选项</button>
        </p>
    </p>

    <script>
        new Vue({
            el: '#app',
            data: {
                options: [
                    '1',
                    '2'
                ],
                vote: '1'
            },
            methods: {
                newOption() {
                    this.options.push(this.options.length.toString());
                }
            }
        })
    </script>
</body>
</html>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal