[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"3759998":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":12,"collection_id":13,"published_timestamp":14,"language":15,"subforem_id":16,"positive_reactions_count":12,"cover_image":17,"social_image":18,"canonical_url":19,"created_at":20,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":21,"tag_list":22,"tags":23,"body_html":28,"body_markdown":29,"user":30},"article",3759998,"How does VuReact compile Vue v-model to React?","VuReact is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In...","May 27","how-does-vureact-compile-vue-v-model-to-react-a4b","/smirk9581/how-does-vureact-compile-vue-v-model-to-react-a4b","https://dev.to/smirk9581/how-does-vureact-compile-vue-v-model-to-react-a4b",0,null,"2026-05-27T02:00:00Z","en",1,"https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkfgrmhru3tc561zjlxtn.png","https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkfgrmhru3tc561zjlxtn.png","https://vureact.top/en/guide/semantic-comparison/template/v-model.html","2026-05-27T00:33:58Z",4,"webdev, javascript, vue, react",[24,25,26,27],"webdev","javascript","vue","react","\u003Cp>\u003Ca href=\"https://vureact.top/en/guide/introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">VuReact\u003C/a> is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common \u003Ccode>v-model\u003C/code> directive is compiled into React code by VuReact.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"before-we-start\" href=\"#before-we-start\">\n  \u003C/a>\n  Before We Start\n\u003C/h2>\n\n\u003Cp>To keep the examples easy to read, this article follows two simple conventions:\u003C/p>\n\n\u003Col>\n\u003Cli>All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\u003C/li>\n\u003Cli>The discussion assumes you are already familiar with Vue 3's \u003Ccode>v-model\u003C/code> directive usage.\u003C/li>\n\u003C/ol>\n\n\u003Ch2>\n  \u003Ca name=\"compilation-mapping\" href=\"#compilation-mapping\">\n  \u003C/a>\n  Compilation Mapping\n\u003C/h2>\n\n\u003Ch3>\n  \u003Ca name=\"vmodel-basic-form-twoway-binding\" href=\"#vmodel-basic-form-twoway-binding\">\n  \u003C/a>\n  v-model: Basic form two-way binding\n\u003C/h3>\n\n\u003Cp>\u003Ccode>v-model\u003C/code> is Vue's syntactic sugar for implementing two-way data binding on form input elements, combining the functionality of \u003Ccode>v-bind\u003C/code> and \u003Ccode>v-on\u003C/code>.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"text-input\" href=\"#text-input\">\n  \u003C/a>\n  Text input\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">v-model=\u003C/span>\u003Cspan class=\"s\">\"keyword\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">keyword\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">keyword\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's \u003Ccode>v-model\u003C/code> directive is compiled into React's controlled component pattern. VuReact adopts a \u003Cstrong>controlled component compilation strategy\u003C/strong>, converting the template directive into a combination of \u003Ccode>value\u003C/code> and \u003Ccode>onChange\u003C/code>. This \u003Cstrong>fully preserves Vue's two-way binding semantics\u003C/strong> — achieving synchronized updates between data and the view.\u003C/p>\n\n\u003Cp>The key characteristics of this compilation approach are:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Semantic consistency\u003C/strong>: Fully simulates Vue \u003Ccode>v-model\u003C/code> behavior by implementing two-way data binding\u003C/li>\n\u003Cli>\n\u003Cstrong>Controlled component pattern\u003C/strong>: Uses React's standard controlled component implementation\u003C/li>\n\u003Cli>\n\u003Cstrong>Event handling\u003C/strong>: Automatically handles input events and value updates\u003C/li>\n\u003Cli>\n\u003Cstrong>Reactive integration\u003C/strong>: Seamlessly integrates with Vue's reactive system\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"vmodel-with-different-input-types\" href=\"#vmodel-with-different-input-types\">\n  \u003C/a>\n  v-model with different input types\n\u003C/h3>\n\n\u003Cp>Vue's \u003Ccode>v-model\u003C/code> automatically adapts based on the input element type, and VuReact preserves this intelligent adaptation.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"checkbox\" href=\"#checkbox\">\n  \u003C/a>\n  Checkbox\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">type=\u003C/span>\u003Cspan class=\"s\">\"checkbox\"\u003C/span> \u003Cspan class=\"na\">v-model=\u003C/span>\u003Cspan class=\"s\">\"checked\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">type=\u003C/span>\u003Cspan class=\"s\">\"checkbox\"\u003C/span> \u003Cspan class=\"na\">value=\u003C/span>\u003Cspan class=\"s\">\"vue\"\u003C/span> \u003Cspan class=\"na\">v-model=\u003C/span>\u003Cspan class=\"s\">\"frameworks\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">type\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"checkbox\"\u003C/span>\n  \u003Cspan class=\"na\">checked\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">checked\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChecked\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">checked\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">checked\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">type\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"checkbox\"\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"vue\"\u003C/span>\n  \u003Cspan class=\"na\">checked\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">frameworks\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">frameworks\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">checked\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"radio-button\" href=\"#radio-button\">\n  \u003C/a>\n  Radio button\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">type=\u003C/span>\u003Cspan class=\"s\">\"radio\"\u003C/span> \u003Cspan class=\"na\">value=\u003C/span>\u003Cspan class=\"s\">\"male\"\u003C/span> \u003Cspan class=\"na\">v-model=\u003C/span>\u003Cspan class=\"s\">\"gender\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">type=\u003C/span>\u003Cspan class=\"s\">\"radio\"\u003C/span> \u003Cspan class=\"na\">value=\u003C/span>\u003Cspan class=\"s\">\"female\"\u003C/span> \u003Cspan class=\"na\">v-model=\u003C/span>\u003Cspan class=\"s\">\"gender\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">type\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"radio\"\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"male\"\u003C/span>\n  \u003Cspan class=\"na\">checked\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">gender\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">===\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">male\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">gender\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">male\u003C/span>\u003Cspan class=\"dl\">'\u003C/span> \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">type\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"radio\"\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"female\"\u003C/span>\n  \u003Cspan class=\"na\">checked\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">gender\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">===\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">female\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">gender\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">female\u003C/span>\u003Cspan class=\"dl\">'\u003C/span> \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"select-dropdown\" href=\"#select-dropdown\">\n  \u003C/a>\n  Select dropdown\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><select\u003C/span> \u003Cspan class=\"na\">v-model=\u003C/span>\u003Cspan class=\"s\">\"selected\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"nt\"><option\u003C/span> \u003Cspan class=\"na\">value=\u003C/span>\u003Cspan class=\"s\">\"a\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Option A\u003Cspan class=\"nt\"></option>\u003C/span>\n  \u003Cspan class=\"nt\"><option\u003C/span> \u003Cspan class=\"na\">value=\u003C/span>\u003Cspan class=\"s\">\"b\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Option B\u003Cspan class=\"nt\"></option>\u003C/span>\n\u003Cspan class=\"nt\"></select>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">select\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">selected\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">selected\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">option\u003C/span> \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"a\"\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Option A\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">option\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">option\u003C/span> \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"b\"\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Option B\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">option\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">select\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"vmodel-modifiers\" href=\"#vmodel-modifiers\">\n  \u003C/a>\n  v-model modifiers\n\u003C/h3>\n\n\u003Cp>Vue's \u003Ccode>v-model\u003C/code> supports various modifiers for controlling when and how data is updated.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"lazy-modifier\" href=\"#lazy-modifier\">\n  \u003C/a>\n  .lazy modifier\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">v-model.lazy=\u003C/span>\u003Cspan class=\"s\">\"message\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">message\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onBlur\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">message\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"number-modifier\" href=\"#number-modifier\">\n  \u003C/a>\n  .number modifier\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">v-model.number=\u003C/span>\u003Cspan class=\"s\">\"age\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">age\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">age\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nc\">Number\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"trim-modifier\" href=\"#trim-modifier\">\n  \u003C/a>\n  .trim modifier\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">v-model.trim=\u003C/span>\u003Cspan class=\"s\">\"username\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">username\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">username\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">?.\u003C/span>\u003Cspan class=\"nf\">trim\u003C/span>\u003Cspan class=\"p\">();\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"combined-modifiers\" href=\"#combined-modifiers\">\n  \u003C/a>\n  Combined modifiers\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">v-model.lazy.trim=\u003C/span>\u003Cspan class=\"s\">\"search\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span>\n  \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">search\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onBlur\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">search\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">?.\u003C/span>\u003Cspan class=\"nf\">trim\u003C/span>\u003Cspan class=\"p\">();\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"component-vmodel\" href=\"#component-vmodel\">\n  \u003C/a>\n  Component v-model\n\u003C/h3>\n\n\u003Cp>Vue 3 made significant improvements to component \u003Ccode>v-model\u003C/code>, supporting multiple \u003Ccode>v-model\u003C/code> bindings and custom modifiers.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"basic-component-vmodel\" href=\"#basic-component-vmodel\">\n  \u003C/a>\n  Basic component v-model\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"c\"><!-- Parent component -->\u003C/span>\n\u003Cspan class=\"nt\"><CustomInput\u003C/span> \u003Cspan class=\"na\">v-model=\u003C/span>\u003Cspan class=\"s\">\"inputValue\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\n\u003Cspan class=\"c\"><!-- Child component CustomInput.vue -->\u003C/span>\n\u003Cspan class=\"nt\"><script \u003C/span>\u003Cspan class=\"na\">setup\u003C/span> \u003Cspan class=\"na\">lang=\u003C/span>\u003Cspan class=\"s\">\"ts\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"kd\">const\u003C/span> \u003Cspan class=\"nx\">props\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nf\">defineProps\u003C/span>\u003Cspan class=\"p\">([\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">modelValue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">]);\u003C/span>\n  \u003Cspan class=\"kd\">const\u003C/span> \u003Cspan class=\"nx\">emits\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nf\">defineEmits\u003C/span>\u003Cspan class=\"p\">([\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">update:modelValue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">]);\u003C/span>\n\u003Cspan class=\"nt\"></script>\u003C/span>\n\n\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">:value=\u003C/span>\u003Cspan class=\"s\">\"props.modelValue\"\u003C/span> \u003Cspan class=\"err\">@\u003C/span>\u003Cspan class=\"na\">input=\u003C/span>\u003Cspan class=\"s\">\"(e) => emits('update:modelValue', e.target.value)\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight tsx\">\u003Ccode>\u003Cspan class=\"c1\">// Parent component\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">CustomInput\u003C/span>\n  \u003Cspan class=\"na\">modelValue\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">inputValue\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onUpdateModelValue\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">inputValue\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>;\u003C/span>\n\n\u003Cspan class=\"c1\">// Child component CustomInput.tsx\u003C/span>\n\u003Cspan class=\"kd\">type\u003C/span> \u003Cspan class=\"nx\">ICustomInputProps\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">modelValue\u003C/span>\u003Cspan class=\"p\">?:\u003C/span> \u003Cspan class=\"kr\">any\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"nl\">onUpdateModelValue\u003C/span>\u003Cspan class=\"p\">?:\u003C/span> \u003Cspan class=\"p\">(...\u003C/span>\u003Cspan class=\"na\">args\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"kr\">any\u003C/span>\u003Cspan class=\"p\">[])\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"kr\">any\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">CustomInput\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">ICustomInputProps\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"k\">return \u003C/span>\u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span> \u003Cspan class=\"na\">value\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">modelValue\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"na\">onChange\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">onUpdateModelValue\u003C/span>\u003Cspan class=\"p\">?.(\u003C/span>\u003Cspan class=\"nx\">e\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">target\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n  \u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"named-vmodel\" href=\"#named-vmodel\">\n  \u003C/a>\n  Named v-model\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><UserForm\u003C/span> \u003Cspan class=\"na\">v-model:name=\u003C/span>\u003Cspan class=\"s\">\"userName\"\u003C/span> \u003Cspan class=\"na\">v-model:email=\u003C/span>\u003Cspan class=\"s\">\"userEmail\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">UserForm\u003C/span>\n  \u003Cspan class=\"na\">name\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">userName\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onUpdateName\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">userName\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">email\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">userEmail\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">onUpdateEmail\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">userEmail\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n  \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"compilation-strategy-summary\" href=\"#compilation-strategy-summary\">\n  \u003C/a>\n  Compilation strategy summary\n\u003C/h3>\n\n\u003Cp>VuReact's v-model compilation strategy demonstrates a \u003Cstrong>complete two-way binding conversion capability\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Basic form elements\u003C/strong>: Converts \u003Ccode>v-model\u003C/code> on various input types into corresponding controlled components\u003C/li>\n\u003Cli>\n\u003Cstrong>Modifier support\u003C/strong>: Fully supports \u003Ccode>.lazy\u003C/code>, \u003Ccode>.number\u003C/code>, \u003Ccode>.trim\u003C/code> and other modifiers\u003C/li>\n\u003Cli>\n\u003Cstrong>Component v-model\u003C/strong>: Supports component-level two-way binding, including multiple \u003Ccode>v-model\u003C/code> bindings and custom modifiers\u003C/li>\n\u003Cli>\n\u003Cstrong>Event mapping\u003C/strong>: Intelligently maps Vue events to React events (\u003Ccode>input\u003C/code> → \u003Ccode>onChange\u003C/code>, etc.)\u003C/li>\n\u003Cli>\n\u003Cstrong>Type safety\u003C/strong>: Preserves TypeScript type definition integrity\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>Compilation mapping for different element types\u003C/strong>:\u003C/p>\n\n\u003Cdiv class=\"table-wrapper-paragraph\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Element type\u003C/th>\n\u003Cth>Vue event\u003C/th>\n\u003Cth>React event\u003C/th>\n\u003Cth>Value attribute\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>input[type=\"text\"]\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>input\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>onChange\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>value\u003C/code>\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>textarea\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>input\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>onChange\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>value\u003C/code>\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>input[type=\"checkbox\"]\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>change\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>onChange\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>checked\u003C/code>\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>input[type=\"radio\"]\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>change\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>onChange\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>checked\u003C/code>\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>select\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>change\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>onChange\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>value\u003C/code>\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\u003C/div>\n\n\u003Cp>VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite form binding logic. The compiled code preserves Vue's semantics and convenience while following React's form handling best practices, keeping the migrated application fully interactive.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"related-links\" href=\"#related-links\">\n  \u003C/a>\n  Related Links\n\u003C/h2>\n\n\u003Cul>\n\u003Cli>Docs: \u003Ca href=\"https://vureact.top/en/guide/semantic-comparison/template/v-model.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://vureact.top/en/guide/semantic-comparison/template/v-model.html\u003C/a>\n\u003C/li>\n\u003Cli>GitHub: \u003Ca href=\"https://github.com/vureact-js/core\" target=\"_blank\" rel=\"noopener noreferrer\">https://github.com/vureact-js/core\u003C/a>\n\u003C/li>\n\u003C/ul>\n\n","[VuReact](https://vureact.top/en/guide/introduction.html) is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common `v-model` directive is compiled into React code by VuReact.\n\n## Before We Start\n\nTo keep the examples easy to read, this article follows two simple conventions:\n\n1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\n2. The discussion assumes you are already familiar with Vue 3's `v-model` directive usage.\n\n## Compilation Mapping\n\n### v-model: Basic form two-way binding\n\n`v-model` is Vue's syntactic sugar for implementing two-way data binding on form input elements, combining the functionality of `v-bind` and `v-on`.\n\n#### Text input\n\n- Vue\n\n```html\n\u003Cinput v-model=\"keyword\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cinput\n  value={keyword.value}\n  onChange={(value) => {\n    keyword.value = value;\n  }}\n/>\n```\n\nAs the example shows, Vue's `v-model` directive is compiled into React's controlled component pattern. VuReact adopts a **controlled component compilation strategy**, converting the template directive into a combination of `value` and `onChange`. This **fully preserves Vue's two-way binding semantics** — achieving synchronized updates between data and the view.\n\nThe key characteristics of this compilation approach are:\n\n1. **Semantic consistency**: Fully simulates Vue `v-model` behavior by implementing two-way data binding\n2. **Controlled component pattern**: Uses React's standard controlled component implementation\n3. **Event handling**: Automatically handles input events and value updates\n4. **Reactive integration**: Seamlessly integrates with Vue's reactive system\n\n---\n\n### v-model with different input types\n\nVue's `v-model` automatically adapts based on the input element type, and VuReact preserves this intelligent adaptation.\n\n#### Checkbox\n\n- Vue\n\n```html\n\u003Cinput type=\"checkbox\" v-model=\"checked\" />\n\u003Cinput type=\"checkbox\" value=\"vue\" v-model=\"frameworks\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cinput\n  type=\"checkbox\"\n  checked={checked.value}\n  onChecked={(e) => {\n    checked.value = e.target.checked;\n  }}\n/>\n\u003Cinput\n  type=\"checkbox\"\n  value=\"vue\"\n  checked={frameworks.value}\n  onChange={(e) => {\n    frameworks.value = e.target.checked;\n  }}\n/>\n```\n\n#### Radio button\n\n- Vue\n\n```html\n\u003Cinput type=\"radio\" value=\"male\" v-model=\"gender\" />\n\u003Cinput type=\"radio\" value=\"female\" v-model=\"gender\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cinput\n  type=\"radio\"\n  value=\"male\"\n  checked={gender.value === 'male'}\n  onChange={() => { gender.value = 'male' }}\n/>\n\n\u003Cinput\n  type=\"radio\"\n  value=\"female\"\n  checked={gender.value === 'female'}\n  onChange={() => { gender.value = 'female' }}\n/>\n```\n\n#### Select dropdown\n\n- Vue\n\n```html\n\u003Cselect v-model=\"selected\">\n  \u003Coption value=\"a\">Option A\u003C/option>\n  \u003Coption value=\"b\">Option B\u003C/option>\n\u003C/select>\n```\n\n- Compiled React\n\n```jsx\n\u003Cselect\n  value={selected.value}\n  onChange={(e) => {\n    selected.value = e.target.value;\n  }}\n>\n  \u003Coption value=\"a\">Option A\u003C/option>\n  \u003Coption value=\"b\">Option B\u003C/option>\n\u003C/select>\n```\n\n---\n\n### v-model modifiers\n\nVue's `v-model` supports various modifiers for controlling when and how data is updated.\n\n#### .lazy modifier\n\n- Vue\n\n```html\n\u003Cinput v-model.lazy=\"message\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cinput\n  value={message.value}\n  onBlur={(e) => {\n    message.value = e.target.value;\n  }}\n/>\n```\n\n#### .number modifier\n\n- Vue\n\n```html\n\u003Cinput v-model.number=\"age\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cinput\n  value={age.value}\n  onChange={(e) => {\n    age.value = Number(e.target.value);\n  }}\n/>\n```\n\n#### .trim modifier\n\n- Vue\n\n```html\n\u003Cinput v-model.trim=\"username\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cinput\n  value={username.value}\n  onChange={(e) => {\n    username.value = e.target.value?.trim();\n  }}\n/>\n```\n\n#### Combined modifiers\n\n- Vue\n\n```html\n\u003Cinput v-model.lazy.trim=\"search\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cinput\n  value={search.value}\n  onBlur={(e) => {\n    search.value = e.target.value?.trim();\n  }}\n/>\n```\n\n---\n\n### Component v-model\n\nVue 3 made significant improvements to component `v-model`, supporting multiple `v-model` bindings and custom modifiers.\n\n#### Basic component v-model\n\n- Vue\n\n```html\n\u003C!-- Parent component -->\n\u003CCustomInput v-model=\"inputValue\" />\n\n\u003C!-- Child component CustomInput.vue -->\n\u003Cscript setup lang=\"ts\">\n  const props = defineProps(['modelValue']);\n  const emits = defineEmits(['update:modelValue']);\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cinput :value=\"props.modelValue\" @input=\"(e) => emits('update:modelValue', e.target.value)\" />\n\u003C/template>\n```\n\n- Compiled React\n\n```tsx\n// Parent component\n\u003CCustomInput\n  modelValue={inputValue.value}\n  onUpdateModelValue={(value) => {\n    inputValue.value = value;\n  }}\n/>;\n\n// Child component CustomInput.tsx\ntype ICustomInputProps = {\n  modelValue?: any;\n  onUpdateModelValue?: (...args: any[]) => any;\n}\n\nfunction CustomInput(props: ICustomInputProps) {\n  return (\n    \u003Cinput value={props.modelValue} onChange={(e) => props.onUpdateModelValue?.(e.target.value)} />\n  );\n}\n```\n\n#### Named v-model\n\n- Vue\n\n```html\n\u003CUserForm v-model:name=\"userName\" v-model:email=\"userEmail\" />\n```\n\n- Compiled React\n\n```jsx\n\u003CUserForm\n  name={userName.value}\n  onUpdateName={(value) => {\n    userName.value = value;\n  }}\n  email={userEmail.value}\n  onUpdateEmail={(value) => {\n    userEmail.value = value;\n  }}\n/>\n```\n\n---\n\n### Compilation strategy summary\n\nVuReact's v-model compilation strategy demonstrates a **complete two-way binding conversion capability**:\n\n1. **Basic form elements**: Converts `v-model` on various input types into corresponding controlled components\n2. **Modifier support**: Fully supports `.lazy`, `.number`, `.trim` and other modifiers\n3. **Component v-model**: Supports component-level two-way binding, including multiple `v-model` bindings and custom modifiers\n4. **Event mapping**: Intelligently maps Vue events to React events (`input` → `onChange`, etc.)\n5. **Type safety**: Preserves TypeScript type definition integrity\n\n**Compilation mapping for different element types**:\n\n| Element type              | Vue event | React event  | Value attribute |\n| ------------------------- | --------- | ------------ | --------------- |\n| `input[type=\"text\"]`      | `input`   | `onChange`   | `value`         |\n| `textarea`                | `input`   | `onChange`   | `value`         |\n| `input[type=\"checkbox\"]`  | `change`  | `onChange`   | `checked`       |\n| `input[type=\"radio\"]`     | `change`  | `onChange`   | `checked`       |\n| `select`                  | `change`  | `onChange`   | `value`         |\n\nVuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite form binding logic. The compiled code preserves Vue's semantics and convenience while following React's form handling best practices, keeping the migrated application fully interactive.\n\n## Related Links\n\n- Docs: \u003Chttps://vureact.top/en/guide/semantic-comparison/template/v-model.html>\n- GitHub: \u003Chttps://github.com/vureact-js/core>\n",{"name":31,"username":32,"twitter_username":13,"github_username":32,"user_id":33,"website_url":34,"profile_image":35,"profile_image_90":36},"Ryan John","smirk9581",3937044,"https://github.com/smirk9581","https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png",1780059473180]