element-ui循环出来的input文本框并获取value值_element ui input 多选 value 值为-CSDN博客

本文链接：https://blog.csdn.net/hql1024/article/details/102957680

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.js"></script>

</head>
<style>
    .textbox{
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }
    .text{
        margin:10px;
    }
</style>
<body>
<div id="Vue">
    <div class="textbox">
        <div v-for="(item,index) in list">
            {{item.name}}<el-input class="text" @change="textbox($data[item.input])" :key="index" v-model="$data[item.input]" :placeholder="item.placeholder" :style="{width: item.width + 'px'}"></el-input>
        </div>
    </div>
    <el-button type="primary" @click="tijiao">提交</el-button>
</div>
</body>
<script>
    new Vue({
        el:"#Vue",
        data:{
            name:'',
            moble:'',
            id:'',
            QQ:'',
            list:[
                {
                    width:200,
                    placeholder:"请输入姓名",
                    name:"姓名:",
                    input:"name",
                },
                {
                    width:250,
                    placeholder:"请输入手机号",
                    name:"手机号:",
                    input:"moble",
                },
                {
                    width:300,
                    placeholder:"请输入身份证号",
                    name:"身份证号:",
                    input:"id",
                },
                {
                    width:350,
                    placeholder:"请输入QQ号",
                    name:"QQ号:",
                    input:"QQ",
                }
            ],
        },
        methods:{
            textbox(e){
                console.log(e)
            },
            tijiao(e){
                console.log('姓名',this.name)
                console.log('手机号',this.moble)
                console.log('身份证号',this.id)
                console.log('QQ号',this.QQ)
            }
        },
        created(){
            // $.ajax({
            //     type: "get",	//请求方式
            //     async: false,
            //     url: "",
            //     data: {},		//传值给后台
            //     dataType: "json",
            //     success: function (res) {
            //         console.log(res)
            //
            //     },
            // });
        }
    })
</script>

</html>