首页 / 知识

Vue3 输入框实例解析

2023-04-11 16:21:00

Vue3 输入框实例解析
我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
 
v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。
 
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为属性并将 change 作为事件。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
 
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>input 表单消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
  <p>textarea 表单消息是:</p>
  <p style="white-space: pre">{{ message2 }}</p>
  
</div>
 
<script>
const app = {
  data() {
    return {
      message: '',
      message2: '菜鸟教程\r\nhttps://www.runoob.com'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
 
 
在文本区域 textarea 插值是不起作用，需要使用 v-model 来代替：
<!-- 错误 -->
<textarea>{{ text }}</textarea>
 
<!-- 正确 -->
<textarea v-model="text"></textarea>

输入元素输入框表单指令类型

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢