以前在jquery中都是把一個投票選項的dom手動寫成一個字串,然後點擊「增加一項」按鈕的時候,使用append方式追加這個dom上去。請問vue.js中該怎麼做這個功能呢?
滿天的星座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>