以前在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的官方文档,深入点理解数据绑定的概念就好了,直接上示例吧: