Vue 一套构建用户界面的渐进式的框架（表单篇~）

最新推荐文章于 2022-08-07 21:17:51 发布

so_#

最新推荐文章于 2022-08-07 21:17:51 发布

阅读量2.1k

点赞数

分类专栏：笔记文章 Vue 文章标签： vue

Jine

本文链接：https://blog.csdn.net/weixin_42760849/article/details/109448326

版权

文章同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

笔记

32 篇文章 0 订阅

订阅专栏

Vue

12 篇文章 0 订阅

订阅专栏

表单

v-model

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。

它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

应该通过 JavaScript 在组件的 data 选项中声明初始值。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
</head>
<body>
    <div class="app">
        <input type="text" v-model='message'>
        <h2>{{message}}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                message : '请输入'
            }
        })
    </script>
</body>
</html>

结果，如下图：

在这里插入图片描述

上图，若在控制台中修改了message的value值，那么页面也会进行对应的变化（可以按照我给的代码自己尝试下）

若在input中进行更新，会有以下效果，如图：

在这里插入图片描述

上图，结果可以看出，在input中修改的内容，也在h2元素显示内容作对应更新，而且在控制台进行重新获取，会发现message的value也进行了修改，这就是双向绑定

v-model 实现原理

'1、v-bind 绑定一个value'
'2、v-on 指令给当前元素绑定input事件'


首先通过，绑定input事件，并设置方法（获取到event对象，取得value，再进行更新到message数据上），这样实现了用户输入内容，改变内部数据迭代单项绑定

而因为Vue是响应式数据，若在控制台修改了message的value，会动态的更新页面，所以，在h2元素上把message加上，那么这样就实现了双向绑定，也就是v-model的实现原理


代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model 实现原理</title>
</head>
<body>
    <div class="app">
        <input type="text" @input='change' :value="message">
        <h2>{{message}}</h2>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' , 
            data : {
                message : 'Jine'
            },
            methods : {
                change(evnet){
                    this.message = event.target.value;
                }
            }
        })
    </script>
</body>
</html>

v-model （radio）

实现，点击当前所选单选按钮，实现页面的数据的更新

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model radio</title>
</head>
<body>
    <div class="app">
        <label for="#">
            <input type="radio" name="男" id="man" v-model='sex' value="男">男
        </label>

        <label for="#">
            <input type="radio" name="女" id="woman" v-model='sex' value="女">女
        </label>

        <h2>{{select}}{{sex}}</h2>
    </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                sex : '男',
                select : '你当前选择的 ：'
            }
        })
    </script>
</body>
</html>

v-model（checkbox）

同意协议案例（单选框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同意协议</title>
</head>
<body>
    <div class="app">
        <label for="#">
            <input type="radio" name="agree" id="agree" value="agree" v-model='status'>同意协议
        </label>
        <button :disabled='!status'>{{next}}</button>
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                next : '下一步',
                status : false
            }
        })
    </script>
</body>
</html>

选择爱好案例（多选框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <input type="checkbox" value="篮球" v-model='arry'>篮球
        <input type="checkbox" value="足球" v-model='arry'>足球
        <input type="checkbox" value="羽毛球" v-model='arry'>羽毛球
        <input type="checkbox" value="乒乓球" v-model='arry'>乒乓球
        <input type="checkbox" value="排球" v-model='arry'>排球

        <h2>{{select}}{{arry}}</h2>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                arry : [] ,
                select : '你所选择的是：'
            }
        })
    </script>
</body>
</html>


/*
	真实开发中：使用v-bind 动态绑定value，并加入for循环
*/

v-model（select）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择水果</title>
</head>
<body>
    <div class="app">
        <!-- 选择单个 -->
        <select v-model='fruit'>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="桃">桃</option>
            <option value="梨">梨</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>{{select}}{{fruit}}</h2>

        <!-- 选择多个 -->
        <select v-model='fruits' multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="桃">桃</option>
            <option value="梨">梨</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>{{select}}{{fruits}}</h2>
    </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el : '.app' ,
                data : {
                    fruit : '香蕉' ,
                    select : '你选择的是：' ,
                    fruits : []
                }
            })
        </script>
  
</body>
</html>

修饰符

lazy
默认情况下，v-mode默认是在input事件中，同步输入框的数据（data）的
（可以让数据在失去焦点或回车时更新）


number
默认情况下，在输入框无论输入字母或数字，都会被当做字符串类型进行处理。（若输入框内容为数字则自动转换成数字类型）

trim
若输入的内容首尾有很多空格，可以使用trim来去除
（可以去除内容左右俩边的空格）

===============================================================
    
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <!-- 失去焦点后更新 -->
        <input type="text" v-model.lazy='message'>
        <h2>{{message}}</h2>

        <!-- 内容自动转换number -->
        <input type="text" v-model.number='num'>
        <h2>{{num}}--{{typeof num}}</h2>

        <!-- 去除空格 -->
        <input type="text" v-model.trim='str'>
        <h2>{{str}}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el : '.app' ,
            data : {
                message : '失去焦点后自动更新' ,
                num : 0 ,
                str : ''
            }
        })
    </script>
</body>
</html>

so_#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 一套构建用户界面的渐进式的框架（表单篇~）

表单v-model可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源
复制链接

扫一扫