VUE - 7 - VUE的表单处理

最新推荐文章于 2024-04-17 20:26:52 发布

wendyGao_Yin

最新推荐文章于 2024-04-17 20:26:52 发布

阅读量470

点赞数

分类专栏： VUE 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/wendyGao_Yin/article/details/123135085

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

VUE的表单处理

基础用法
文本/ 多行文本
复选框
单选按钮
选择框
修饰符

基础用法

vue使用v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

文本/ 多行文本

在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model来代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
    <link rel="icon" href="../logo.svg">
</head>
<body>    
    <div id="root">
        <p>文本消息：{{msg}}</p>
        <input type="text" v-model="msg"><br/><br/>
        <textarea v-model="msg" cols="15" rows="10"></textarea>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.config.productionTip=false;        
        var vm = new Vue({
            el:"#root",
            data:{
                msg: "在文本区域插值并不会生效，应用 v-model 来代替。",
            },
        })
    </script>
</body>
</html>

效果：改任一个表单元素值另一个都会跟着一起改，因为绑定的是同一个数据，且实时改变。
在这里插入图片描述

复选框

单个复选框，绑定到布尔值
多个复选框，绑定到同一个数组
多个复选框，必须提前定义好数组承载数据。

<body>    
    <div id="root">
        <p>
            爱好：<span v-show="likes.length>0">{{likes}}</span> <br/> <br/>            
            <label><input type="checkbox" v-model="likes" value="吃饭" />吃饭</label>
            <label><input type="checkbox" v-model="likes" value="睡觉" />睡觉</label>
            <label><input type="checkbox" v-model="likes" value="跑步" />跑步</label>
        </p>
        <p><label><input type="checkbox" v-model="bool">已阅读提示！</label> {{bool}}</p>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.config.productionTip=false;        
        var vm = new Vue({
            el:"#root",
            data:{
                bool:true,
                likes:[]
            },
        })
    </script>
</body>

效果：
在这里插入图片描述
点击吃饭、跑步、已阅读提示，效果如图。

单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
    <link rel="icon" href="../logo.svg">
</head>
<body>    
    <div id="root">
        <p>
            性别：{{sex}}<br><br>
            <label><input type="radio" v-model="sex" value="男">男</label>、
            <label><input type="radio" v-model="sex" value="女">女</label>
        </p>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.config.productionTip=false;        
        var vm = new Vue({
            el:"#root",
            data:{
                sex:""
            },
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述
点击按钮 ‘女’：（给sex赋予默认值’女’,也是这个效果）

选择框

选择框也分单选和多选。单选绑定一个字符串，多选绑定到一个数组（和多选框结果类似）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
    <link rel="icon" href="../logo.svg">
</head>
<body>    
    <div id="root">
        <p>名字：{{name}}</p>
        <div>
           地址：
           <select v-model="selected">
          <!-- <select multiple  v-model="selected" > :多选添加属性 multiple -->
               <option disabled value="">请选择</option>
                <option v-for="item in adds" :value="item" :key="item">
                    {{ item }}
                </option>
            </select>
            &emsp;&emsp;&emsp;
            <span>Selected: {{ selected }}</span>
        </div>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.config.productionTip=false;        
        var vm = new Vue({
            el:"#root",
            data:{
                name:"kk",
	            adds:["北京","天津","河北"],
	            selected: '北京',
	            //selected: ['北京'],多选绑定到数组上
	            },
        })
    </script>
</body>
</html>

单选结果：
在这里插入图片描述
多选结果：
多选按住ctrl选择,或者shift连续选择,点击选项。

修饰符

.lazy :
- 用法：<input v-model.lazy="msg"> ,在“change”时而非“input”时更新。
- 作用：因为v-model在每次 input 事件触发后将输入框的值与数据进行同步。添加 lazy 修饰符后，在 change 事件之后进行同步。
.number：
- 用法： <input v-model.number="age" type="number">，
- 作用：自动将用户的输入值转为数值类型。
- 因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。
.trim : 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：<input v-model.trim="msg">,这个和字符串的trim方法效果一样。

wendyGao_Yin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE - 7 - VUE的表单处理

VUE的表单处理基础用法文本/ 多行文本复选框单选按钮选择框基础用法vue使用v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 rad
复制链接

扫一扫