• Vue内容绑定(v-model)


    v-model演示

    v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上或者组件上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-model指令</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="box">
                <input type="text" v-model.lazy="text1" placeholder="请输入姓名">
                <p>姓名:{{text1}}</p>
                
                <input type="checkbox" v-model="text2">
                <p>是否90后:{{text2}}</p>
                
                <input type="radio" value="男" v-model="text3">
                <input type="radio" value="女" v-model="text3">
                <p>性别:{{text3}}</p>
                
                <select v-model="text4">
                    <option disabled value="">请选择</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                </select>
                <p>您选择: {{ text4 }}</p>
                
                <input type="checkbox" value="苹果" v-model="text5">苹果
                <input type="checkbox" value="香蕉" v-model="text5">香蕉
                <input type="checkbox" value="梨" v-model="text5"><p>你喜欢的水果:{{text5}}</p>
            </div>
        </body>
        <script type="text/javascript" charset="utf-8">
            new Vue({
                el: "#box",
                data: {
                    text1: "刘小涛",
                    text2: "true",
                    text3: "保密",
                    text4: "",
                    text5: [],
                }
            })
        </script>
    </html>

    输入框,单选,复选,下拉框演示案例;复制可运行。

    修饰符

    .lazy

    在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-model指令</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="box">
                <!-- 在 "change" 而不是 "input" 事件中更新 -->
                <input v-model.lazy="msg" >
                <p>{{msg}}</p>
            </div>
        </body>
        <script type="text/javascript" charset="utf-8">
            new Vue({
                el: "#box",
                data: {
                    msg: "刘小涛",
                }
            })
        </script>
    </html>

    .number

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

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-model指令</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="box">
                <input v-model.number="age" type="number">
                <p>{{age}}</p>
            </div>
        </body>
        <script type="text/javascript" charset="utf-8">
            new Vue({
                el: "#box",
                data: {
                    age: "",
                }
            })
        </script>
    </html>

    .trim

    如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-model指令</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="box">
                <input v-model.trim="input">
                <p>{{input}}</p>
            </div>
        </body>
        <script type="text/javascript" charset="utf-8">
            new Vue({
                el: "#box",
                data: {
                    input: "",
                }
            })
        </script>
    </html>

    v-model原理

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-model指令</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="box">
                <input v-model="something"/>
                <!-- 等同 -->
                <input v-bind:value="something" v-on:input="something = $event.target.value"/>
                <p>{{something}}</p>
            </div>
        </body>
        <script type="text/javascript" charset="utf-8">
            new Vue({
                el: "#box",
                data: {
                    something: "",
                }
            })
        </script>
    </html>

    解释:

    $event 指代当前触发的事件对象。

    $event.target 指代当前触发的事件对象的dom

    $event.target.value 就是当前dom的value值

    在v-on:input方法中,

    value => something

    在:value中:

    something => value

    如此,形成了一个闭环,也就是所说的数据的双向绑定。

    满足语法糖规则:属性必须为value,方法名必须为:input。

     

    想自定组件实现v-model,可以在下面我参考文章里了解更多。

    参考文章:

    https://www.runoob.com/vue2/vue-forms.html

    https://www.jianshu.com/p/0d089f770ab2

    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    PHPMailer发送邮件失败:SMTP connect failed
    QQ邮箱开启SMTP服务的步骤
    php中PHPMailer发送带附件的电子邮件方法
    怎么获取smtp服务器用户帐号和密码
    How To Install Flash Player In Ubuntu 10.04 Lucid Lynx,install firefox flash plugin addon for ubuntu
    Rails 3.1 execjs and Could not find a JavaScript runtime
    railser
    Harmony: JavaScript And A DOM Environment In Ruby
    郭德纲继10月1日发微博感叹“暗箭起同行”,疑似暗讽姜昆“江郎才尽”后
    算命先生也用电脑了
  • 原文地址:https://www.cnblogs.com/antao/p/12563646.html
Copyright © 2020-2023  润新知