vue.js表单

余月初贰

已于 2022-08-11 14:14:30 修改

阅读量415

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-08-11 14:13:25 首次发布

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/126284037

版权

你可以使用v-model指令在表单控件元素上创建双向数据绑定。

v-model会根据控件类型自动选取正确的方法来更新元素。

type=“text”	v-model收集的值就是，input的值
type=“radio”	v-model的值，就是个标签的value的值
type=“checkbox”

没有数组value的值时，v-model收集的就是check的属性。
配置v-model值是数组，那么收集的就是value的值。
配置v-model值是字符串，那么收集的值checked的值（布尔值）

输入框

下面代码实现了input和textarea元素使用v-model双向数据绑定：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="vue.js"></script>
   </head>
   <body>
       <div id="app">
           <p>input 元素：</p>
           <input v-model="message" placeholder="编辑我……">
           <p>消息是: {{ message }}</p>

           <p>textarea 元素：</p>
           <p style="white-space: pre">{{ message2 }}</p>
           <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
       </div>

       <script>
           new Vue({
               el: '#app',
               data: {
                   message: 'Runoob',
                   message2: ''
               }
           })
       </script>
   </body>
</html>

v-model修饰符

lazy	失去焦点再收集数据
number	输入字符串转为有效数字
trim	输入首尾空格过滤

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="vue.js"></script>
   </head>
   <body>
       
       <div id="root">
           <form @submit.prevent="save">
               姓名：<input type="text" value="" v-model="userinfo.realname" /><br /><br />
               年龄：<input type="number" value="" v-model.number="userinfo.age" /><br /><br />
               性别：<input type="radio" name="sex" value="1" v-model="userinfo.sex" /> 男 <input name="sex" type="radio"
                   value="2" v-model="userinfo.sex" /> 女<br /><br />
               爱好：<input type="checkbox" name="hobby" value="1" v-model="userinfo.hobby" /> 玩游戏
               <input type="checkbox" name="hobby" value="2" v-model="userinfo.hobby" /> 跳舞
               <input type="checkbox" name="hobby" value="3" v-model="userinfo.hobby" /> 跑步<br /><br />
               城市：
               <select name="city" v-model.number="userinfo.city">
                   <option value="0">请选择数据</option>
                   <option value="1">合肥</option>
                   <option value="2">芜湖</option>
                   <option value="3">六安</option>
               </select><br /><br />
               介绍：<textarea v-model.lazy="userinfo.desc"></textarea>
               <input type="submit" value="提交数据" />
           </form>
       </div>

       
       <script>
           Vue.config.devtools = true
           new Vue({
               el: "#root",
               data: {
                   userinfo: {
                       realname: '',
                       age: '',
                       sex: 1,
                       hobby: [],
                       city: 0,
                       desc: ''
                   }
               },
               methods: {
                   save() {
                       console.log(JSON.stringify(this.userinfo));
                   }
               },
           })
       </script>
   </body>
</html>

运行效果

余月初贰

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue.js表单

你可以使用v-model指令在表单控件元素上创建双向数据绑定。v-model会根据控件类型自动选取正确的方法来更新元素。没有数组value的值时，v-model收集的就是check的属性。配置v-model值是数组，那么收集的就是value的值。配置v-model值是字符串，那么收集的值checked的值（布尔值）...
复制链接

扫一扫