Community Learn Tools Library Leisure
search
English
javascript - How to dynamically increase or decrease voting options in vue.js?
某草草
某草草 2017-05-19 10:33:35
0
1
752

In the past, in jquery, the DOM of a voting option was manually written into a string, and then when the "Add an item" button was clicked, the append method was used to append the DOM. May I ask how to implement this function in vue.js?

某草草
某草草

reply all(1)
滿天的星座
滿天的星座2017-05-19 10:35:35 1 floor

You can read more of Vue’s official documentation and understand the concept of data binding in depth. Let’s go straight to the example: 

<!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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template