本篇文章讲解一下 vue.js 动态添加删除文本框input、下拉框select、单选radio、多选checkbox的方案。
今天写的这个例子是一个很好的案例，用到了好多知识点
vue.js数组便利
vue.js的数据绑定
vue.js的三元判断
vue.js的属性绑定
vue.js的事件绑定
先看一下效果
直接上代码
.layout { width: 1200px; margin: 0 auto; }
文本框：
下拉框：
选项一
选项二
单选：
选项一
选项二
| 多选：
选项一
选项二
删除
新增一条
保存
文本框：{{item.Text}}
下拉框：{{item.Select==0?'选项一':'选项二'}}
单选：{{item.Radio==1?'选项一':'选项二'}}
多选：{{cb==1?'选项一':'选项二'}}
{{saveStr}}
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);
}
}
});
