自游互动本篇文章讲解一下 vue.js 动态添加删除文本框input、下拉框select、单选radio、多选checkbox的方案。
今天写的这个例子是一个很好的案例，用到了好多知识点
- vue.js数组便利
- vue.js的数据绑定
- vue.js的三元判断
- vue.js的属性绑定
- vue.js的事件绑定
先看一下效果
直接上代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></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 placeholder="文本框" v-model.number="item.Text" />
<label >下拉框：</label>
<select v-model.number="item.Select">
<option value="0">选项一</option>
<option value="1">选项二</option>
</select>
<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>
<label class="control_label">| 多选：</label>
<input type="checkbox" :id="'checkbox1'+index" :name="'checkboxName'+index" value="1" v-model="item.Checkbox" /><label :for="'checkbox1'+index">选项一</label>
<input type="checkbox" :id="'checkbox2'+index" :name="'checkboxName'+index" value="2" v-model="item.Checkbox" /><label :for="'checkbox2'+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.Text}}</span>
下拉框：<span style="color:red">{{item.Select==0?'选项一':'选项二'}}</span>
单选：<span style="color:red">{{item.Radio==1?'选项一':'选项二'}}</span>
多选：<span style="color:red"><span v-for="cb in item.Checkbox">{{cb==1?'选项一':'选项二'}}</span></span>
</div>
</div>
<div>
{{saveStr}}
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
list: [
{
Text: "",
Select: 0,
Radio: 1,
Checkbox:[]
}
],
saveStr:""
},
mounted: function () {
},
methods: {
getData: function () {
var that = this;
//如果数据加载，可在这里写，通过ajax获取数据复制给that.list
},
//添加一行
add: function () {
this.list.push({
Text: "",
Select: 0,
Radio: 1,
Checkbox: []
});
},
//删除一行
del: function (index) {
console.log(index);
this.list.splice(index, 1);
},
//模拟保存数据
save: function () {
this.saveStr =JSON.stringify(this.list);
}
}
});
</script>