国内网站搭建百度小说

国内网站搭建,百度小说,做网站编程用什么语言好,网站开发可以用哪些语言一、v-model 的本质v-model 本质上是一个 语法糖#xff0c;用于实现#xff1a;父组件向子组件传值子组件向父组件回传更新在 Vue 3 中#xff0c;v-model 默认等价于#xff1a;:modelValuexxx update:modelValuexxx $event二、基础用法#x…一、v-model的本质v-model本质上是一个语法糖用于实现父组件向子组件传值子组件向父组件回传更新在 Vue 3 中v-model默认等价于:modelValuexxx update:modelValuexxx $event二、基础用法表单元素1. 文本输入框input v-modelusername /等价于input :valueusername inputusername $event.target.value /2. 常见表单绑定表单类型示例textinput v-modeltext /checkboxinput typecheckbox v-modelchecked /radioinput typeradio valueA v-modelpicked /selectselect v-modelselectedtextareatextarea v-modelmsg/textarea三、组件上的v-model核心重点1. Vue 3 默认规则强烈推荐子组件script setup defineProps({ modelValue: String }) const emit defineEmits([update:modelValue]) /script template input :valuemodelValue inputemit(update:modelValue, $event.target.value) / /template父组件Child v-modelusername /2. 等价展开写法理解用Child :modelValueusername update:modelValueusername $event /四、自定义v-model参数Vue 3 新特性1. 父组件Child v-model:titletitle /2. 子组件script setup defineProps({ title: String }) const emit defineEmits([update:title]) /script template input :valuetitle inputemit(update:title, $event.target.value) / /template五、多个v-model非常实用父组件Child v-model:titletitle v-model:contentcontent /子组件script setup defineProps({ title: String, content: String }) const emit defineEmits([ update:title, update:content ]) /script六、v-model修饰符.trim/.number等1. 使用方式Child v-model:title.trimtitle /2. 子组件接收修饰符script setup const props defineProps({ title: String, titleModifiers: { default: () ({}) } }) /script3. 使用修饰符if (props.titleModifiers.trim) { value value.trim() }七、在computed中使用v-model双向绑定const value computed({ get() { return props.modelValue }, set(val) { emit(update:modelValue, val) } })模板中直接使用input v-modelvalue /八、v-model与 Vue 2 的核心差异项目Vue 2Vue 3默认 propvaluemodelValue默认事件inputupdate:modelValue多 v-model不支持支持修饰符内置可自定义语法固定更灵活九、最佳实践工程经验组件统一使用modelValue始终通过emit修改值避免在子组件中直接修改 props多字段表单优先使用多个 v-model复杂逻辑用computed封装 v-model十、完整示例可直接复制父组件script setup import { ref } from vue import MyInput from ./MyInput.vue const username ref() /script template MyInput v-modelusername / p{{ username }}/p /template子组件MyInput.vuescript setup defineProps({ modelValue: String }) const emit defineEmits([update:modelValue]) /script template input :valuemodelValue inputemit(update:modelValue, $event.target.value) / /template