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

表单输入绑定 v-model

时间:2023-02-28 09:24:26浏览次数:32  
标签:绑定 表单 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

相关文章

  • 5_1表单验证案例
     验证要求:用户名不能为空用户名长度大于等于6用户名中不能有数字密码不少于5位两次密码必须一致邮箱格式正确必须有@和. 例如123456789@qq.com实现效果:   <!DOCTY......
  • 5_1表单验证案例
    ​ 验证要求:用户名不能为空用户名长度大于等于6用户名中不能有数字密码不少于5位两次密码必须一致邮箱格式正确必须有@和. 例如123456789@qq.com实现效果: ......
  • 5_1表单验证案例
    ​ 验证要求:用户名不能为空用户名长度大于等于6用户名中不能有数字密码不少于5位两次密码必须一致邮箱格式正确必须有@和. 例如123456789@qq.com实现效果: ......
  • 注册功能_功能分析与注册功能_前台_表单校验1
    注册功能_功能分析1.注册   2.登录3.退出注册功能_前台_表单校验11.前台效果1.表单校验//校验用户名......
  • Vue2之v-model双向绑定原理
    一、简介v-model实现双向绑定的语法糖,常用于表单与组件之间的数据双向绑定.二、表单实现双向绑定1.原理分两步骤v-bind绑定一个value属性v-on指令给当前元素绑定inp......
  • Rethinking CNN Models for Audio Classification
    WhatenablestheImageNetpretrainedmodelstolearnusefulaudiorepresentations,wesystematicallystudyhowmuchofpretrainedweightsisusefulforlearnin......
  • 基于jeecgboot的支持online表单审批的功能正式发布
       基于jeecgboot的flowable流程支持online表单审批线上发布一个完整的版本,利用原有online表单功能,通过选择现有online表单数据进行审批申请与操作,基本支持各自表单包......
  • 基于jeecgboot的flowable流程支持online表单(二)
        这部分很多功能代码由网友撼动宇宙提供,这里先感谢这位网友的辛苦工作   这部分主要是online表单的显示与录入数据获取1、先建两个表--------------------......
  • 基于jeecgboot的flowable流程支持online表单(三)
        这部分主要是实现online表单的各种形式表单,包括主从表表单,同时录入采用现有官方的模式录入数据,通过选择已有数据的方式进行流程申请与审批,免去各种录入组件等兼......
  • 基于jeecgboot的flowable流程增加节点表单的支持(二)
    2、进入流程编辑页面如下,其中传入相应的数据,结构如下designerData:{loading:false,bpmnXml:'',deploymentId:null,form:......