{"id":496,"date":"2025-12-05T14:42:38","date_gmt":"2025-12-05T06:42:38","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=496"},"modified":"2025-12-05T14:42:38","modified_gmt":"2025-12-05T06:42:38","slug":"vue3%e4%b8%adv-model%e5%ae%9e%e7%8e%b0%e5%8f%8c%e5%90%91%e6%95%b0%e6%8d%ae%e7%bb%91%e5%ae%9a%e7%9a%84%e5%85%a8%e9%9d%a2%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue3%e4%b8%adv-model%e5%ae%9e%e7%8e%b0%e5%8f%8c%e5%90%91%e6%95%b0%e6%8d%ae%e7%bb%91%e5%ae%9a%e7%9a%84%e5%85%a8%e9%9d%a2%e6%8c%87%e5%8d%97\/","title":{"rendered":"Vue3\u4e2dv-model\u5b9e\u73b0\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u7684\u5168\u9762\u6307\u5357"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>Vue 3 \u4e2d <code>v-model<\/code> \u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u7684\u5168\u9762\u6307\u5357<\/strong>\uff0c\u8986\u76d6\u57fa\u7840\u7528\u6cd5\u3001\u547d\u540d <code>v-model<\/code>\u3001\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u7ed1\u5b9a\u3001\u4fee\u9970\u7b26\u4ee5\u53ca\u8fdb\u9636\u6280\u5de7\uff0c\u9644\u5e26\u5b8c\u6574\u793a\u4f8b\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">1\ufe0f\u20e3 \u57fa\u7840\u7528\u6cd5<\/h1>\n\n\n\n<p>\u5728 Vue 3 \u4e2d\uff0c<code>v-model<\/code> \u7528\u4e8e\u5b9e\u73b0\u7236\u7ec4\u4ef6\u548c\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u7684 <strong>\u53cc\u5411\u7ed1\u5b9a<\/strong>\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;div&gt;\n    &amp;lt;input v-model=&quot;message&quot; placeholder=&quot;\u8bf7\u8f93\u5165\u5185\u5bb9&quot; \/&gt;\n    &amp;lt;p&gt;\u4f60\u8f93\u5165\u7684\u5185\u5bb9\uff1a{{ message }}&amp;lt;\/p&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;\n\nconst message = ref(&#039;&#039;)\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u89e3\u91ca\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>v-model=\"message\"<\/code> \u7b49\u4ef7\u4e8e\uff1a <code>&lt;input :value=\"message\" @input=\"message = $event\" \/><\/code><\/li>\n\n\n\n<li><code>ref<\/code> \u521b\u5efa\u54cd\u5e94\u5f0f\u6570\u636e<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2\ufe0f\u20e3 \u7ec4\u4ef6\u5185\u4f7f\u7528 v-model<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">2.1 \u7236\u7ec4\u4ef6<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;MyInput v-model=&quot;username&quot; \/&gt;\n&amp;lt;p&gt;\u7528\u6237\u540d\uff1a{{ username }}&amp;lt;\/p&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">2.2 \u5b50\u7ec4\u4ef6\u5b9e\u73b0<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;input :value=&quot;modelValue&quot; @input=&quot;$emit(&#039;update:modelValue&#039;, $event)&quot; \/&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { defineProps } from &#039;vue&#039;\n\nconst props = defineProps&amp;lt;{ modelValue: string }&gt;()\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u8bf4\u660e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue 3 \u9ed8\u8ba4\u4f7f\u7528 <strong><code>modelValue<\/code> + <code>update:modelValue<\/code><\/strong> \u4f5c\u4e3a\u53cc\u5411\u7ed1\u5b9a\u7684\u7ea6\u5b9a<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\u901a\u8fc7 <code>$emit('update:modelValue', value)<\/code> \u66f4\u65b0\u7236\u7ec4\u4ef6<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3\ufe0f\u20e3 \u591a\u4e2a v-model\uff08\u547d\u540d v-model\uff09<\/h1>\n\n\n\n<p>Vue 3 \u652f\u6301 <strong>\u4e00\u4e2a\u7ec4\u4ef6\u591a\u4e2a v-model<\/strong>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7236\u7ec4\u4ef6\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;MyInput v-model:title=&quot;title&quot; v-model:content=&quot;content&quot; \/&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5b50\u7ec4\u4ef6\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;input\n    :value=&quot;title&quot;\n    @input=&quot;$emit(&#039;update:title&#039;, $event)&quot;\n    placeholder=&quot;\u6807\u9898&quot;\n  \/&gt;\n  &amp;lt;textarea\n    :value=&quot;content&quot;\n    @input=&quot;$emit(&#039;update:content&#039;, $event)&quot;\n    placeholder=&quot;\u5185\u5bb9&quot;\n  &gt;&amp;lt;\/textarea&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { defineProps } from &#039;vue&#039;\n\nconst props = defineProps&amp;lt;{\n  title: string\n  content: string\n}&gt;()\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u8bf4\u660e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>v-model:xxx<\/code> \u5bf9\u5e94\u5b50\u7ec4\u4ef6\u7684 <code>props<\/code> \u548c <code>$emit('update:xxx')<\/code><\/li>\n\n\n\n<li>\u53ef\u4ee5\u5b9e\u73b0\u4e00\u4e2a\u7ec4\u4ef6\u591a\u4e2a\u53cc\u5411\u7ed1\u5b9a<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4\ufe0f\u20e3 v-model \u4fee\u9970\u7b26<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u4fee\u9970\u7b26<\/th><th>\u7528\u9014<\/th><\/tr><\/thead><tbody><tr><td><code>.lazy<\/code><\/td><td>\u7ed1\u5b9a\u503c\u5728 <code>change<\/code> \u4e8b\u4ef6\u89e6\u53d1\u65f6\u66f4\u65b0<\/td><\/tr><tr><td><code>.number<\/code><\/td><td>\u81ea\u52a8\u5c06\u8f93\u5165\u503c\u8f6c\u4e3a\u6570\u5b57<\/td><\/tr><tr><td><code>.trim<\/code><\/td><td>\u81ea\u52a8\u53bb\u6389\u9996\u5c3e\u7a7a\u683c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;input v-model.number=&quot;age&quot; placeholder=&quot;\u8bf7\u8f93\u5165\u5e74\u9f84&quot; \/&gt;\n&amp;lt;input v-model.trim=&quot;username&quot; placeholder=&quot;\u8bf7\u8f93\u5165\u7528\u6237\u540d&quot; \/&gt;\n&amp;lt;input v-model.lazy=&quot;email&quot; placeholder=&quot;\u8bf7\u8f93\u5165\u90ae\u7bb1&quot; \/&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5\ufe0f\u20e3 \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5185\u5b9e\u73b0\u4fee\u9970\u7b26<\/h1>\n\n\n\n<p>\u5982\u679c\u5b50\u7ec4\u4ef6\u4e5f\u60f3\u652f\u6301\u4fee\u9970\u7b26\uff0c\u9700\u8981\u5728 <code>$emit<\/code> \u65f6\u5904\u7406\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { defineProps, toRef } from &#039;vue&#039;\n\nconst props = defineProps&amp;lt;{ modelValue: string }&gt;()\nconst value = toRef(props, &#039;modelValue&#039;)\n\n\/\/ \u81ea\u5b9a\u4e49\u5904\u7406 trim\nconst onInput = (e: Event) =&gt; {\n  const input = e.target as HTMLInputElement\n  const val = input.value.trim()\n  value.value = val\n  emit(&#039;update:modelValue&#039;, val)\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">6\ufe0f\u20e3 \u7ed3\u5408 Composition API \u4f7f\u7528 v-model<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref, defineProps, defineEmits } from &#039;vue&#039;\n\nconst props = defineProps&amp;lt;{ modelValue: string }&gt;()\nconst emit = defineEmits(&#x5B;&#039;update:modelValue&#039;])\n\nconst localValue = ref(props.modelValue)\n\nconst updateValue = (val: string) =&gt; {\n  localValue.value = val\n  emit(&#039;update:modelValue&#039;, val)\n}\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;input :value=&quot;localValue&quot; @input=&quot;updateValue($event.target.value)&quot; \/&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u8bf4\u660e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>localValue<\/code> \u4fdd\u6301\u5b50\u7ec4\u4ef6\u5185\u90e8\u54cd\u5e94\u5f0f<\/li>\n\n\n\n<li>\u4f7f\u7528 <code>$emit<\/code> \u901a\u77e5\u7236\u7ec4\u4ef6\u66f4\u65b0<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">7\ufe0f\u20e3 v-model \u4e0e TypeScript \u7c7b\u578b\u5b89\u5168<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst props = defineProps&amp;lt;{ modelValue: string | number }&gt;()\nconst emit = defineEmits&amp;lt;(e: &#039;update:modelValue&#039;, value: string | number) =&gt; void&gt;()\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u4f18\u52bf\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7f16\u8f91\u5668\u81ea\u52a8\u63d0\u793a\u7c7b\u578b<\/li>\n\n\n\n<li>\u63d0\u9ad8\u7ec4\u4ef6\u53ef\u7ef4\u62a4\u6027<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">8\ufe0f\u20e3 \u8fdb\u9636\u793a\u4f8b\uff1a\u8868\u5355\u7ec4\u4ef6<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;form @submit.prevent=&quot;submitForm&quot;&gt;\n    &amp;lt;input v-model.trim=&quot;form.username&quot; placeholder=&quot;\u7528\u6237\u540d&quot; \/&gt;\n    &amp;lt;input v-model.number=&quot;form.age&quot; placeholder=&quot;\u5e74\u9f84&quot; type=&quot;number&quot; \/&gt;\n    &amp;lt;button type=&quot;submit&quot;&gt;\u63d0\u4ea4&amp;lt;\/button&gt;\n  &amp;lt;\/form&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { reactive } from &#039;vue&#039;\n\nconst form = reactive({\n  username: &#039;&#039;,\n  age: 0\n})\n\nconst submitForm = () =&gt; {\n  console.log(&#039;\u63d0\u4ea4\u8868\u5355:&#039;, form)\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">9\ufe0f\u20e3 \u603b\u7ed3<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u7840\u7528\u6cd5<\/strong>\uff1a<code>v-model=\"state\"<\/code><\/li>\n\n\n\n<li><strong>\u7ec4\u4ef6\u5185\u53cc\u5411\u7ed1\u5b9a<\/strong>\uff1a<code>props.modelValue + $emit('update:modelValue', val)<\/code><\/li>\n\n\n\n<li><strong>\u547d\u540d v-model<\/strong>\uff1a<code>v-model:xxx<\/code> \u5bf9\u5e94 <code>props.xxx<\/code> + <code>update:xxx<\/code><\/li>\n\n\n\n<li><strong>\u4fee\u9970\u7b26<\/strong>\uff1a<code>.lazy<\/code>\u3001<code>.number<\/code>\u3001<code>.trim<\/code><\/li>\n\n\n\n<li><strong>TypeScript \u7c7b\u578b<\/strong>\uff1a<code>defineProps<\/code> + <code>defineEmits<\/code> \u4fdd\u8bc1\u7c7b\u578b\u5b89\u5168<\/li>\n\n\n\n<li><strong>Composition API<\/strong>\uff1a\u53ef\u5728\u5b50\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u672c\u5730\u54cd\u5e94\u5f0f <code>ref<\/code>\uff0c\u901a\u8fc7 <code>$emit<\/code> \u540c\u6b65\u7236\u7ec4\u4ef6<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd Vue 3 \u4e2d v-model \u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u7684\u5168\u9762\u6307\u5357\uff0c\u8986\u76d6\u57fa&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue3%e4%b8%adv-model%e5%ae%9e%e7%8e%b0%e5%8f%8c%e5%90%91%e6%95%b0%e6%8d%ae%e7%bb%91%e5%ae%9a%e7%9a%84%e5%85%a8%e9%9d%a2%e6%8c%87%e5%8d%97\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-496","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=496"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/496\/revisions"}],"predecessor-version":[{"id":497,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/496\/revisions\/497"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}