06.vue-charp-06 表单与v-model

Posted easy5weikai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了06.vue-charp-06 表单与v-model相关的知识,希望对你有一定的参考价值。

何使用指令v-model完成表单的数据双向绑定。

基本用法

<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="你的名字" />
        <h1>你好,{{name}}</h1>
    </div>
    <script src="../lib/vue.2.6.11.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                name: ‘‘
            }
        })
    </script>
</body>

v-model 与单项按钮

v-model-实现单选按钮互斥(可以不用 name="books" 来进行分组)

<body>
    <div id="app">
        <div>
            <div>
                <h1>:checked-无法实现单选按钮互斥</h1>
                <input type="radio" id="contactChoice1" name="contact" value="email">
                <label for="contactChoice1">Email</label>

                <input type="radio" id="contactChoice2" name="contact" value="phone" :checked="myContact">
                <label for="contactChoice2">Phone</label>

                <input type="radio" id="contactChoice3" name="contact" value="mail">
                <label for="contactChoice3">Mail</label>
                <p>myContact的值为:{{myContact}}</p>
            </div>
            <div>
                <h1>v-model-实现单选按钮互斥(可以不用 name="books" 来进行分组)</h1>
                <input type="radio" id="book1" name="books" value="html" v-model="myBook">
                <label for="book1">HTML</label>

                <input type="radio" id="book2" name="books" value="js" v-model="myBook">
                <label for="book2">JS</label>

                <input type="radio" id="book3" name="books" value="css" v-model="myBook">
                <label for="book3">CSS</label>
                <p>myBook的值为:{{myBook}}</p>
            </div>
        </div>

    </div>
    <script src="../lib/vue.2.6.11.js"></script>
    <script>
        var app = new Vue({
            el: ‘#app‘,
            data: {
                myContact: true,
                myBook: "css"
            }
        })
    </script>
</body>

运行后显示

  • CSS单项按被选中,

  • myBook的值为:css

  • 选中JS按钮,myBook的值为:js

技术图片

v-model 与多选框

<body>
    <div id="app">
        <div>
            <div>
                <h1>复选框基本属性</h1>
                <p>
                    <input type="checkbox" id="cbox1" value="first_checkbox">
                    <label for="cbox1">This is the first checkbox</label>
                </p>
                <p>
                    <input type="checkbox" id="cbox2" value="second_checkbox" checked="checked">
                    <label for="cbox2">This is the second checkbox, which is checked</label>
                </p>
            </div>
            <div>
                <h1>v-model-单个复选框</h1>
                <input type="checkbox" id="contactChoice1" v-model="sayYes">
                <label for="contactChoice1">Yes</label>
                <p>sayYes的值为:{{sayYes}}</p>
            </div>
            <div>
                <h1>v-model-多个复选框</h1>
                <input type="checkbox" id="book1" value="html" v-model="myBooks">
                <label for="book1">HTML</label>

                <input type="checkbox" id="book2" value="js" v-model="myBooks">
                <label for="book2">JS</label>

                <input type="checkbox" id="book3" value="css" v-model="myBooks">
                <label for="book3">CSS</label>
                <p>myBooks的值为:{{myBooks}}</p>
            </div>
        </div>

    </div>
    <script src="../lib/vue.2.6.11.js"></script>
    <script>
        var app = new Vue({
            el: ‘#app‘,
            data: {
                sayYes: true,
                myBooks: ["html", "css"]
            }
        })
    </script>
</body>
  • 单个复选框,绑定一个布尔值值,本例绑定的是sayYes
  • 多个复选框,绑定一个数组,数组的取值与复选框的value属性值对应

技术图片

v-model 与 下拉框

option是备选项,如果含有value属性,v-model就会优先匹配value的值;如果没有,就会直接匹配 option的text

<body>
    <div id="app">
        <div>
            <div>
                <h1>下拉框</h1>
                <select multiple>
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                    <option value="4">D</option>
                    <option value="5">E</option>
                    <option value="6">F</option>
                </select>
            </div>
            <div>
                <h1>v-model-单选下拉框</h1>
                <select v-model="myContract">
                    <option value="email">Email</option>
                    <option value="phone">Phone</option>
                    <option value="tel">Tel</option>
                </select>
                <p>myContract的值为:{{myContract}}</p>
            </div>
            <div>
                <h1>v-model-多选下拉框</h1>
                <select multiple v-model="myBooks">
                    <option value="html">HTML</option>
                    <option value="js">JS</option>
                    <option value="css">CSS</option>
                </select>
                <p>myBooks的值为:{{myBooks}}</p>
            </div>
        </div>

    </div>
    <script src="../lib/vue.2.6.11.js"></script>
    <script>
        var app = new Vue({
            el: ‘#app‘,
            data: {
                myContract: "phone",
                myBooks: ["html", "css"]
            }
        })
    </script>
</body>

技术图片

绑定值

...

修饰符

.lazy

与事件的修饰符类似,v-model 也有修饰符,用于控制数据同步的时机。.lazy:
在输入框中,v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外),使用修饰符 .lazy会转变为在change事件中同步,而是在失焦或按回车时才更新。

    <div id="app">
        <input type="text" v-model.lazy="name" placeholder="你的名字" />
        <h1>你好,{{name}}</h1>
    </div>
    <script src="../lib/vue.2.6.11.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                name: ‘‘
            }
        })
    </script>

.number

使用修饰符.number可以将输入转换为Number类型,否则虽然你输入的是数字,但它的类型其实是String,比如在数字输入框时会比较有用,

    <div id="app">
        <input type="text" v-mode="myNumber1" placeholder="请输入数字" />
        <p>myNumber1的类型:{{typeof myNumber1}},其值为:{{myNumber1}}</p>

        <input type="text" v-model.number="myNumber2" placeholder="请输入数字" />
        <p>myNumber2的类型:{{typeof myNumber2}},其值为:{{myNumber2}}</p>
    </div>
    <script src="../lib/vue.2.6.11.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                myNumber1: 100,
                myNumber2: 2
            }
        })
    </script>

.trim

修饰符 .trim可以自动过滤输入的首尾空格

    <div id="app">
        <input type="text" v-model.trim="name" placeholder="你的名字" />
        <h1>{{name}}</h1>
    </div>
    <script src="../lib/vue.2.6.11.js"></script>
    <script>
        var app = new Vue({
            el: ‘#app‘,
            data: {
                name: ‘ 123 ‘
            }
        })
    </script>

以上是关于06.vue-charp-06 表单与v-model的主要内容,如果未能解决你的问题,请参考以下文章

v-mode 双向数据绑定

v-mode踩坑心得

v-mode的基本使用,自定义组件传参

Vue中的双向数据绑定简单介绍

Django模版与vue.js渲染冲突问题

vue框架之自定义组件中使用v-model