搜索

首页  >  问答  >  正文

javascript - vue.js中如何做动态增减投票选项的功能?

以前在jquery中都是把一个投票选项的dom手动写成一个字符串,然后点击“增加一项”按钮的时候,使用append方式追加这个dom上去。请问一下vue.js中该怎么做这个功能呢?

某草草某草草2756 天前751

全部回复(1)我来回复

  • 滿天的星座

    滿天的星座2017-05-19 10:35:35

    楼主可以多读读Vue的官方文档,深入点理解数据绑定的概念就好了,直接上示例吧:

    <!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>
    

    回复
    0
  • 取消回复