javascript - vue.js中如何做动态增减投票选项的功能？
本文介绍了javascript - vue.js中如何做动态增减投票选项的功能？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
以前在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>
<div id="app">
<div>投票</div>
<template v-for="(item, index) in options">
<input type="radio" name="vote" :value="item" v-model="vote">
<label for="vote">选项{{ index }}</label>
</template>
<div>
<button @click="newOption">增加选项</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
options: [
'1',
'2'
],
vote: '1'
},
methods: {
newOption() {
this.options.push(this.options.length.toString());
}
}
})
</script>
</body>
</html>
这篇关于javascript - vue.js中如何做动态增减投票选项的功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
