Vue.js表单

超、凢脫俗 2022-05-10 06:58 117阅读 0赞

使用v-model对表单控件进行双向绑定

1：input控件和textarea控件。

<div id="app">

<input type="text" v-model="message"/>

<p>消息是：\{ \{message\}\}</p>

<textarea v-model="message2"></textarea>

<p style="white-space: pre">\{ \{message2\}\}</p>

</div>

<script>

new Vue(\{

el:'\#app',

data:\{

message:'vue学习',

message2:''

\}

\});

</script>

2：复选框

单个复选框时，v-model中绑定的值，选定结果为true，未选定结果为false。多个复选框时，v-model中绑定的值为一个数组，选定的复选框的value值，放在数组中。数组中值的顺序按选中的顺序排列。

<div id="app">

<p>单个复选框</p>

<input type="checkbox" id="checkbox" v-model="checked"/>

<label for="checkbox">\{ \{checked\}\}</label>

<p>多个复选框</p>

<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"/>

<label for="runoob" >Runoob</label>

<input type="checkbox" id="google" value="Google" v-model="checkedNames"/>

<label for="google" >Google</label>

<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"/>

<label for="taobao" >Taobao</label>

<p>选择的值为：\{ \{checkedNames\}\}</p>

</div>

<script>

new Vue(\{

el:'\#app',

data:\{

checked:false,

checkedNames:\['Google'\]

\}

\});

</script>

这一个示例中，需要注意的是：单个复选框不涉及value，其v-model对应选定与否，选定则为true。反之为false。多个复选框，v-model中指定的属性，其值应该是String数组。数组中可以有默认值，对应value的控件会默认选中。如果没有

默认值，也要写一个空数组：\[\]，如果是字符串或者null，就变为了一个复选框的效果。

其实，正确的理解方式为：根据自己的需要，是想要v-model双向绑定的结果为布尔值还是数组。如果是数组，那么对应的属性默认就需要是数组，否则，无论属性值初始定义为是null、字符串

或者是数值型，都会在绑定后变为boolean。

3：单选框

单选框多个和一个没有什么区别。v-model中绑定的属性，其值应该是字符串，对应着控件中的value。可以有默认值，对应value的控件中会默认选中。默认值可以为null。示例略。

4：select

select控件的v-model绑定的属性，对应的是option的value值。v-model放置在select控件中。没有什么特别的。示例略。

修饰符：

1：.lazy

v-model默认的是在input事件中同步输入框的数据和值。使用：v-model.lazy="message"，将在input事件中同步变为在change事件中同步

2：.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="message" type="number"/>

3：.trim

过滤首尾空格。<input v-model.trim="message"/>

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap表单及表单布局

Bootstrap4 支持二种表单布局方式：堆叠表单（垂直方向），内联表单（水平方向）。示例1（堆叠表单） ![在这里插入图片描述][b614b269291b45da

r囧r小猫/ 2023年09月24日 16:57/ 0 赞/ 32 阅读

相关表单

1、登录界面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2023年08月17日 16:10/ 0 赞/ 71 阅读

相关 vuejs java_vuejs深入浅出—基础篇

一、从HelloWorld说起任何语言的都是从Hello World开始的，VueJs也不例外，直接上代码： \{ \{hello\}\} new Vue(\{ el

朱雀/ 2022年11月05日 12:56/ 0 赞/ 362 阅读

相关 Vuejs——（6）Vuejs与form元素

资料来于官方文档： http://cn.vuejs.org/guide/forms.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更

深藏阁楼爱情的钟/ 2022年07月18日 00:14/ 0 赞/ 253 阅读

相关 php 表单提交表单前端验证

//HTML 代码 <form id="form"> <input type="hidden" name="status" v

た入场券/ 2022年06月09日 09:21/ 0 赞/ 304 阅读

相关表单

表单创建 <form method="post" action="result.html"> <p> 名字：<input name="name

不念不忘少年蓝@/ 2022年03月10日 18:46/ 0 赞/ 341 阅读

相关表单

1.打开phpstudy 2.打开编辑器，我的是用phpstorm 所以我直接在C:\\phpStudy\\PHPTutorial\\WWW这个目录下建立了两个文件，一个是

梦里梦外;/ 2022年02月25日 03:42/ 0 赞/ 298 阅读

相关 Vuejs

1. 入门案例 1. 创建vuejs-demo.html <!DOCTYPE html> <html> <he

灰太狼/ 2021年12月21日 19:23/ 0 赞/ 318 阅读

相关 Vuejs基本知识(十二)【表单的绑定】

基本上，所有的表单项，无论是`<input/>`, 还是 `<textarea/>`，都需要使用 `v-model`来绑定。表单项: `input, textarea,

约定不等于承诺〃/ 2021年06月26日 16:06/ 0 赞/ 413 阅读

相关 Vuejs基本知识(十三)【表单的提交】

大家要切记这一点：　在任何 `Single Page Ap`p中，js代码都不会产生. 一个传统意义的`form`表单提交！（这会引起整个页面的刷新）所以，我们往往用事件来

我不是女神ヾ/ 2021年06月26日 16:06/ 0 赞/ 472 阅读