美文网首页工作随笔
Vue v-model 动态绑定

Vue v-model 动态绑定

作者: 经典de1956 | 来源:发表于2020-04-10 16:36 被阅读0次

    最近在写vue页面的时候发生了一个操作:
    用v-for生成了多个input,然后他把input的数据用v-model双向绑定到了data里面的一个对象。
    data数据格式

    data() {
        return {
            modelvalue: {
                page: {
                    patientName: ' '
                },
                page1: {
                    patientName1: ' '
                },
                page2: {
                    patientName2: ' '
                }
            },
            ness: {
                page: {
                    patientSex: {
                        label: '姓名',
                        placeholder: '请输入用姓名',
                        required: true,
                        type: 'input',
                        input_type: 'text',
                        name: 'patientName'
                    }
                },
                page1: {
                    patientSex: {
                        label: '姓名',
                        placeholder: '请输入用姓名',
                        required: true,
                        type: 'input',
                        input_type: 'text',
                        name: 'patientName'
                    }
                }
                page2: {
                    patientSex: {
                        label: '姓名',
                        placeholder: '请输入用姓名',
                        required: true,
                        type: 'input',
                        input_type: 'text',
                        name: 'patientName'
                    }
                }
            }
        }
    }
    
    

    html 结构

    <div v-for="(value, key, index) in akn.ness" :key="key" class="page" v-show="index == num">
        <van-cell-group>
            <div v-for="(item, key2) in value" :key="key2" class="van-cell-boder">
                <van-field v-if="item.type == 'input'" v-model="modelvalue[key][item.name]" required :label="item.label" :type="item.input_type" :placeholder="item.placeholder" />
            </div>
        </van-cell-group>
    </div>
    

    ness 的name写成 name: 'modelvalue . page .patientName'
    html v-model="item.name"
    item.name是字符串
    渲染在页面 v-model=" 'modelvalue . page .patientName' "
    这样是不可以的。。。

    v-model实现机制

    我们先简单说下v-model的机制:v-model会把它关联的响应式数据,动态地绑定到表单元素的value属性上,然后监听表单元素的input事件:当v-model绑定的响应数据发生变化时,表单元素的value值也会同步变化;当表单元素接受用户的输入时,input事件会触发,input的回调逻辑会把表单元素value最新值同步赋值给v-model绑定的响应式数据。

    <input v-model="sth" />
    //  等同于
    <input :value="sth" @input="sth = $event.target.value" />
    

    相关文章

      网友评论

        本文标题:Vue v-model 动态绑定

        本文链接:https://www.haomeiwen.com/subject/hbwrmhtx.html