土豆网网站开发源代码,thinkphp5做的网站,公司做网站的优点,wordpress搬站目录
前言
一、原生元素上的用法
1. 输入框(input)
2. 多行文本域(textarea)
3. 单选按钮(radio)
4. 多选框(checkbox)
5. 下拉选择框(select)
二、自定义组件上的用法
1. 定义一个名为 modelValue 的 props 属性和一个名为 update:modelValue 的事件
2.使用一个可…目录
前言
一、原生元素上的用法
1. 输入框(input)
2. 多行文本域(textarea)
3. 单选按钮(radio)
4. 多选框(checkbox)
5. 下拉选择框(select)
二、自定义组件上的用法
1. 定义一个名为 modelValue 的 props 属性和一个名为 update:modelValue 的事件
2.使用一个可写的同时具有 getter 和 setter 的 computed 属性
三、v-model修饰符
1. lazy 修饰符
2. number 修饰符
四、注意事项 前言
v-model 是 Vue 框架中用于实现双向数据绑定的指令之一在 Vue 3 中保留了这一特性并对其进行了一些改进。Vue 3 的 v-model 指令更加灵活可以适用于原生 HTML 元素和自定义组件并支持修饰符的使用。
一、原生元素上的用法
在 Vue 3 中我们可以通过 v-model 在原生 HTML 元素上实现双向数据绑定。v-model 可以应用于 input、textarea 和 select 等表单元素。
1. 输入框(input)
在Vue 3中可以通过v-model指令实现对输入框的双向绑定。
templatedivinput v-modelmessage typetextpMessage: {{ message }}/p/div
/templatescript setup
import { ref } from vueconst message ref()
/script2. 多行文本域(textarea)
templatedivtextarea v-modelmessage/textareapMessage: {{ message }}/p/div
/templatescript setup
import { ref } from vueconst message ref()
/script3. 单选按钮(radio) 对于单选按钮我们可以通过v-model指令绑定同一个name属性将其与一个变量进行关联。
templatedivinput typeradio idoption1 valueoption1 v-modelselectedOptionlabel foroption1Option 1/labelinput typeradio idoption2 valueoption2 v-modelselectedOptionlabel foroption2Option 2/labelpSelected Option: {{ selectedOption }}/p/div
/templatescript setup
import { ref } from vueconst selectedOption ref()
/script在上面的代码中我们使用v-model指令绑定了两个单选按钮并通过selectedOption变量进行双向数据绑定。用户选择其中一个选项时selectedOption变量会更新并且变化会实时反映在页面上。
4. 多选框(checkbox)
templatedivinput typecheckbox idoption1 valueoption1 v-modelselectedOptionslabel foroption1Option 1/labelinput typecheckbox idoption2 valueoption2 v-modelselectedOptionslabel foroption2Option 2/labelpSelected Options: {{ selectedOptions }}/p/div
/templatescript setup
import { ref } from vueconst selectedOptions ref([])
/script在这个例子中我们使用v-model指令绑定了两个多选框并通过selectedOptions变量进行双向数据绑定。当用户选择或取消选择其中一个多选框时selectedOptions变量会相应地更新并且变化会实时反映在页面上。
注意对于多选框使用v-model进行绑定的变量应该是一个数组类型用于保存选中的多个选项的值。
5. 下拉选择框(select)
templatedivselect v-modelselectedOptionoption valueoption1Option 1/optionoption valueoption2Option 2/option/selectpSelected Option: {{ selectedOption }}/p/div
/templatescript setup
import { ref } from vueconst selectedOption ref()
/script二、自定义组件上的用法
除了原生 HTML 元素Vue 3 中的 v-model 还可以在自定义组件中使用。需要注意的是自定义组件上使用v-model需要遵循一些规则。实现的方式有两种。 默认情况下v-model 在组件上都是使用 modelValue 作为 prop并以 update:modelValue 作为对应的事件。 1. 定义一个名为 modelValue 的 props 属性和一个名为 update:modelValue 的事件
父组件v-model将message变量与该组件进行双向绑定
templatedivchild-component v-modelmessage/child-componentp父组件Message: {{ message }}/p/div
/templatescript setupimport { ref } from vueconst message ref()
/script自定义组件v-model默认绑定的不是value而是modelValue。发射的方法固定位为updatemodelValue。
templatediv子组件input :valuemodelValue input$emit(update:modelValue, $event.target.value) //div
/templatescript setupdefineProps({modelValue: {type: String}})defineEmits([update:modelValue])
/script在自定义组件的模板中我们使用:value来绑定输入框的值并通过input监听输入事件。同时使用$emit函数触发update:modelValue事件将输入框的新值传递给父组件。
通过使用props和事件我们可以实现自定义组件上类似于原生表单元素的双向绑定效果。 2.使用一个可写的同时具有 getter 和 setter 的 computed 属性
父组件同上
自定义组件get 方法需返回 modelValue prop而 set 方法需触发相应的事件。
templatediv子组件input :valuemodelValue input$emit(update:modelValue, $event.target.value) //div
/templatescript setupimport { computed } from vueconst props defineProps({modelValue: {type: String}})defineEmits([update:modelValue])computed({get() {return props.modelValue},set(value) {emit(update:modelValue, value)}})
/script三、v-model修饰符
除了基本的双向绑定外Vue 3 的 v-model 还支持多种修饰符。常用的修饰符有 .lazy 和 .number。
1. lazy 修饰符
.lazy 修饰符可以使输入框的值在失去焦点时才进行更新。例如
templatedivinput typetext v-model.lazymessagep{{ message }}/p/div
/templatescript setup
import { ref } from vueconst message ref(Hello, Vue 3!)/script2. number 修饰符
.number 修饰符可以将输入框的值转换为数值类型。例如
templatedivinput typetext v-model.numbercountpCount: {{ count }}/p/div
/templatescript setup
import { ref } from vueconst count ref(0)/script四、注意事项
1. 不是所有的原生元素都能直接使用 v-model。例如button 元素不能直接使用 v-model 来实现双向绑定但可以使用其他的事件和方法来进行状态管理和更新。
2. 在自定义组件中修改modelValue的值时应当使用响应式的ref或reactive变量。
