自游互动本篇文章讲解一下vue.js如何动态添加删除单选radio按钮并获取值.
直接看效果
代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js动态添加删除单选radio按钮并获取值</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.layout { width: 1200px; margin: 0 auto; }
</style>
</head>
<body>
<div class="layout" id="app">
<div v-for="(item,index) in list">
<label>单选：</label>
<input type="radio" :id="'radio1'+index" :name="'radioName'+index" value="1" v-model="item.Radio" /><label :for="'radio1'+index">选项一</label>
<input type="radio" :id="'radio2'+index" :name="'radioName'+index" value="2" v-model="item.Radio" /><label :for="'radio2'+index">选项二</label>
<button @click="del(index)">删除</button>
</div>
<div style="margin-top:10px">
<button @click="add">新增一条</button>
<button @click="save">保存</button>
</div>
<div>
<div v-for="item in list">
单选：<span style="color:red">{{item.Radio==1?'选项一':'选项二'}}</span>
</div>
</div>
<div>
{{saveStr}}
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
list: [
{
Radio: 1,
}
],
saveStr:""
},
methods: {
//添加一行
add: function () {
this.list.push({
Radio: 1
});
},
//删除一行
del: function (index) {
this.list.splice(index, 1);
},
//模拟保存数据
save: function () {
this.saveStr =JSON.stringify(this.list);
}
}
});
</script>
相关文章
vue.js 动态添加删除文本框input、下拉框select、单选radio、多选checkbox的方案。