Vue3表单
我们可以用v-model指令在表单、及<select>等元素上创建双向数据绑定。</p> <p><a href="http://img.e-com-net.com/image/info8/e33c183001c1400fb03ed192f2638722.jpg" target="_blank"><img alt="Vue3学习笔记（9.3）_第1张图片" height="339" src="http://img.e-com-net.com/image/info8/e33c183001c1400fb03ed192f2638722.jpg" width="649" style="border:1px solid black;"></a></p> <p>v-model会根据控件类型自动选取正确的方法来更新元素。</p> <p>v-model会忽略所有表单的value、checked、selected属性的初始值，使用的是data选项中声明的初始值。</p> <p>v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：</p> <p>text和textarea元素使用value属性和input事件；</p> <p>checkbox和radio使用checked属性和change事件；</p> <p>select字段将value作为属性并将change作为事件。</p> <p></p> <pre><code class="language-html"><!-- * @Author: RealRoad1083425287@qq.com * @Date: 2023-04-04 09:02:04 * @LastEditors: Mei * @LastEditTime: 2023-04-04 10:12:10 * @FilePath: \vscode\v-on.html * @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue_doc/vue.global3.js"></script> </head> <body> <div id="app"> <!-- <button @click="say('不嗨')">Say hi</button> --> <!-- <button @click="one($event),two($event)">Say ji</button> --> <p>input输入的内容：</p> <input type="text" v-model="message" placeholder="请输入内容："> <p>文本框输入的内容为：{{message}}</p> <p>文本域输入的内容：</p> <textarea name="" id="" cols="30" rows="10" v-model="message2" placeholder="文本域输入内容：">
文本域输入的内容是：
{{message2}}
