以前在jquery中都是把一個投票選項的dom手動寫成一個字串,然後點擊「增加一項」按鈕的時候,使用append方式追加這個dom上去。請問vue.js中該怎麼做這個功能呢?
樓主可以多讀讀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>
樓主可以多讀讀Vue的官方文檔,深入點理解資料綁定的概念就好了,直接上範例吧: