关于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是一样的。