功能介绍:利用v-for
循环批量生成el-input
组件,动态绑定v-model
,并且实时获取input
输入值和索引。
1、template
<el-form> <el-form-item v-for="(item, index) in searchForm" :key="index" :label="item.title" > <el-input :type="item.type" v-model="item.modelName" @input.native="change($event, index)" :placeholder="item.placeholder" ></el-input> </el-form-item> </el-form>
2、data
data() { return { searchForm: [ { type: "text", title: "用户名", placeholder: "输入用户名", modelName: "web建站" }, { type: "password", title: "旧密码", placeholder: "输入旧密码", modelName: "ipkd.cn" }, { type: "password", title: "新密码", placeholder: "输入新密码", modelName: "ipkd.cn" } ], userName: "", password1: "", password2: "" }; },
3、methods
methods: { change: function(e, index) { if (index === 0) { this.userName = e.target.value; console.log("用户名:", this.userName); } else if (index === 1) { this.password1 = e.target.value; console.log("原密码", this.password1); } else if (index === 2) { this.password2 = e.target.value; console.log("新密码", this.password2); } } }
上面是“v-for批量生成el-input并动态绑定v-model(实时获取input输入值和索引)”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2534.html
workflows工作流
森林里一只空灵的犀鸟ComfyUI工作流
一只开屏的白色孔雀ComfyUI工作流
一只由水晶制成的蜂鸟
彩色雄鹰玉雕ComfyUI工作流
一个浑身皮毛看起来像丘巴卡的3d动漫人物
在白雪覆盖的广阔平原上两只可爱的小猫
树枝上一只色彩斑斓的小鸟
基础扩图comfyui工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!