javascript - vue.js中如何做动态增减投票选项的功能?
某草草
某草草 2017-05-19 10:33:35
0
1
749

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

某草草
某草草

全部回复(1)
滿天的星座

楼主可以多读读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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板