Vue3的自定义v-model
和vue2稍有不同
文档
- https://cn.vuejs.org/guide/components/v-model.html
目录
-
- 原生组件
- 自定义组件
-
- CustomInput实现代码1
- CustomInput实现代码2
- v-model 的参数
原生组件
input v-model="searchText" />
等价于
input
:value="searchText"
@input="searchText = $event.target.value"
/>
自定义组件
CustomInput v-model="searchText" />
等价于
CustomInput
:model-value="searchText"
@update:model-value="newValue => searchText = newValue"
/>
CustomInput实现代码1
script>
ex服务器托管网port default {
props: ['modelValue'],
emits: ['update:modelValue']
}
script>
template>
input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
template>
CustomInput实现代码2
script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
script>
template>
input v-model="value" />
template>
v-model 的参数
默认使用的是modelValue
, 可以自定义参数名
MyComponent v-model:title="bookTitle" />
组件实现
script>
export default {
props: ['title'],
emits: ['update:title']
}
script>
template>
input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
template>
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: BeautifulPrompt:PAI 推出自研 Prompt 美化器,赋能 AIGC一键出美图
背景 Stable Diffusion(SD)是一种流行的AI生成内容(AI Generated Content,AIGC)模型,能在文字输入的基础上生成各种风格多样的图像。在目前的AIGC方向,SD是开源社区最热门的模型。然而,SD能够生成高颜值的图像,非常…