关于v-model的使用，（vue）

在使用饿了吗组件input输入框时，需要绑定输入的值，同时需要满足在进行点击按钮进行名字编辑的时候，需要锁定原来的值在输入框显示。如下图：

<el-input ref="input"
               size="small"
               class="favorite-input"
               @click.native.stop=""
               :value="favGroup.name"
               @keyup.native.enter="saveTitle"
               v-where-close="{ visible: renameCollect, handle: saveTitle}"
               v-else>
</el-input>

这里直接用：value绑定了我需要改变的变量值。

那么接下来，我是如何在函数中处理这个变量值呢？上代码：

saveTitle (e) {
            const name = this.$refs.input.$el
                .querySelector('input').value.trim()
            if (name) {
                const inputObject = {
                    name,
                    id: this.favGroup.id
                }
                this.$store.dispatch('updateFavoriteGroup', inputObject)
            }
            this.$emit('toggle', false)
            this.renameCollect = false
}

而在另外一个地方，我同样也需要input框，但是使用的v-model，代码如下：

<el-input ref="input"
          :placeholder="$t('favorite.searchPlaceholder')"
          icon="search"
          :class="$style.searchInput"
          v-model="searchVal"
          size="small"
          @keyup.native.enter="">

</el-input>

在data里面，需要返回searchVal，这样写data() { return { searchVal: ' '}}

这个情况下是进行拼音搜索，拼音搜索使用的变量也是searchVal。

v-model是双向绑定，:value是绑定值，在作用上与v-model是一样的。