美文网首页工作随笔
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