element-ui循环出来的input文本框并获取value值

<!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/vu...

HqL丶1024

6335人浏览 · 2019-11-21 11:42:41

HqL丶1024 · 2019-11-21 11:42:41 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^