简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - vue.js中如何做動態增減投票選項的功能？
某草草
某草草 2017-05-19 10:33:35
0
1
699

以前在jquery中都是把一個投票選項的dom手動寫成一個字串，然後點擊「增加一項」按鈕的時候，使用append方式追加這個dom上去。請問vue.js中該怎麼做這個功能呢？

某草草
某草草

全部回覆(1)
滿天的星座
滿天的星座2017-05-19 10:35:35 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>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！