欢迎光临
我们一直在努力

vue.js 动态添加删除文本框input、下拉框select、单选radio、多选checkbox的方案。

本篇文章讲解一下 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>

 

 

赞(0)
未经允许不得转载:自游互动 » vue.js 动态添加删除文本框input、下拉框select、单选radio、多选checkbox的方案。
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们