首页 > 其他分享 >表单输入绑定 v-model

表单输入绑定 v-model

时间:2023-02-28 09:24:26浏览次数:31  
标签:绑定 表单 model property 侦听 message

表单输入绑定

v-model 还可以用于各种不同类型的输入,<textarea><select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合:

  • 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件;
  • <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件;
  • <select> 会绑定 value property 并侦听 change 事件。

基本用法

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

 注意:在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代: 

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

  

标签:绑定,表单,model,property,侦听,message
From: https://www.cnblogs.com/friend/p/17162732.html

相关文章