简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Comment augmenter ou diminuer dynamiquement les options de vote dans vue.js?
某草草
某草草 2017-05-19 10:33:35
0
1
713

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！