Vue学习15_Vue中v-model的使用

最新推荐文章于 2024-09-30 10:50:08 发布

旧梦半岛

最新推荐文章于 2024-09-30 10:50:08 发布

阅读量585

点赞数

分类专栏： Vue 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_48459574/article/details/109259331

版权

Vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

Vue中v-model的使用

在Vue中，我们有时候需要对数据进行双向绑定，所谓的双向绑定的意思就是在Vue的data中定义的变量的值，当改变data中变量的值时，通过Mustache语法获取的值也发生改变，当童Mustache获取的值发生改变时，data的值也随之改变

v-model的基本使用:
示例代码：将data中的变量与输入框的值进行双向绑定：

    <div id="app">
        <input type="text" v-model="message">
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {}
        });
    </script>

运行结果：data与输入框进行绑定
在这里插入图片描述
输入框与data进行绑定：

2. v-model的实现原理：v-bind与v-on的结合使用
示例代码：通过v-bind动态绑定输入框input的value值，实现data数据绑定到输入框，通过v-on监听输入框的输入，当输入框发生输入时，执行函数changeValue，改变data中message的值，从而实现输入框绑定data中的变量

    <div id="app">
        <input type="text" :value="message" @input="changeValue">
        {{message}}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {
                changeValue(event) {
                    this.message = event.target.value;
                }
            }
        });
    </script>

运行结果：
在这里插入图片描述
输入框的值发生改变时：

3. v-model与radio的结合使用：有时候我们需要对单选按钮进行数据的双向绑定，如性别只允许有一个值，这时候我们就需要利用到v-model与radio进行结合使用，以此来达到我们的目的：
示例代码：通过v-model各自绑定data的sex变量，并且为sex设置一个默认值’男’：

    <div id="app">
        <label for="man">
            <input type="radio" id="man" value="男" v-model="sex">男
        </label>
        <label for="woman">
            <input type="radio" id="woman" value="女" v-model="sex">女
        </label>
        <h2>{{sex}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                sex: '男'
            },
            methods: {}
        });
    </script>

运行结果：默认设置为男
在这里插入图片描述
点击女时动态绑定：

4. v-model与chexbox的结合使用：有时候需要对兴趣爱好等诸多元素进行动态绑定时，就需要用到v-model与chexbox的结合使用，在这里提供了两个小案例；
第一个案例就是使用软件或者app时可能会遇到的需要同意协议才能够继续下一步的问题，需要对chexbox框以及下一步的按钮双向绑定同一个值isAgree，并且isAgree的默认值设置为false，当chexbox框没有被选中时，isAgree默认值为false，下一步按钮的disabled的值也为false，当选中chexbox时，表示同意该协议，同时改变isAgree的值为true，按钮的disabled值发生改变，不再禁用；
第二个按钮就是对复选框进行统计，动态绑定复选框，当选择到对应的选项时，将选项的值保存到数组中，从而实现双向绑定：
示例代码：

    <div id="app">
        <label>
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <button type="button" :disabled="!isAgree">下一步</button>
        <p>{{isAgree}}</p>

        <label>
            <input type="checkbox" value="三国演义" v-model="hobbies">三国演义
            <input type="checkbox" value="红楼梦" v-model="hobbies">红楼梦
            <input type="checkbox" value="水浒传" v-model="hobbies">水浒传
            <input type="checkbox" value="西游记" v-model="hobbies">西游记
        </label>
        <p>{{hobbies}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                isAgree: false,//单选框
                hobbies: []//复选框
            },
            methods: {}
        });

运行截图：当同意协议按钮没有选择时，isAgree的值为false，按钮下一步禁用
在这里插入图片描述
当同意协议按钮选择时，isAgree的值为true，按钮下一步启用
5. v-model与select的结合使用：同样的，有时候我们也需要对下拉列表框进行多项选择，这时候我们也需要定义一个空数组用于存储我们的选择：
示例代码：

    <div id="app">
        <select name="books" id="books" v-model="book">
            <option value="三国演义">三国演义</option>
            <option value="水浒传">水浒传</option>
            <option value="红楼梦">红楼梦</option>
            <option value="西游记">西游记</option>
        </select>
        <p>{{book}}</p>
        <hr>
        <select name="books" id="books" v-model="books" multiple>
            <option value="三国演义">三国演义</option>
            <option value="水浒传">水浒传</option>
            <option value="红楼梦">红楼梦</option>
            <option value="西游记">西游记</option>
        </select>
        <p>{{books}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                book: '',
                books: []
            },
            methods: {}
        });
    </script>

运行结果：下拉单选框可以定义一个空字符串变量来存储单选的值
在这里插入图片描述
下拉多选框可以定义一个空数组来存储多选框的值：

6. v-model与input值的双向绑定：
示例代码：既要绑定他的id，又要绑定他的值，并且也要绑定用于存储选择结果的数组

    <div id="app">
        <label v-for="book in originBooks"  :for="book">
            <input type="checkbox" :value="book" v-model="books" :id="book">{{book}}
        </label>
        {{books}}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                books: [],
                originBooks: ['三国演义', '水浒传', '红楼梦', '西游记']
            },
            methods: {}
        });
    </script>

运行结果：
在这里插入图片描述
7. v-model的修饰符：有时候我们需要对双向绑定添加一些修饰，如当我们绑定输入框input时，我们不希望我们还没有输入完成的时候就对我们输入的数据进行双向绑定，只有当我们输入完成后，输入框失去焦点后，才进行双向绑定，我们就需要用到v-model的修饰符lazy；
lazy：
示例代码：

    <div id="app">
        <!-- 修饰符：lazy -->
        <!-- 敲击回车或者失去焦点时绑定 -->
        <input type="text" v-model.lazy="message">
        <p>{{message}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {}
        });
    </script>

运行结果：当我们输入框输入文字时，此时的输入框并没有失去焦点，底下双向绑定的message并没有进行刷新
在这里插入图片描述
当输入框失去焦点时：数据进行双向绑定

**number:**当输入框input第一次双向绑定一个number类型的变量时，没有对input输入框的值进行改变时，变量的类型为number，当输入框的值发生改变时，双向绑定的变量类型发生转变，转变成String类型，有时候我们并不希望发生这样的改变，因此需要在v-model进行双向绑定时对双向绑定的数据进行修饰，需要使用到number修饰符：
示例代码：

    <div id="app">
        <!-- 修饰符：number -->
        <!-- 未添加number:刚开始时是number类型，当输入框的值发生改变时，类型变成string -->
        <input type="number" v-model="tel">
        <p>{{tel}} . {{typeof tel}}</p>

        <!-- 添加了number：自动实现类型转换 -->
        <input type="number" v-model.number="tel1">
        <p>{{tel1}} . {{typeof tel1}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                tel: 123,
                tel1: 123,
            },
            methods: {}
        });
    </script>

运行结果：当输入框的值没有发生改变时，二者的类型都为number
在这里插入图片描述
当输入框的值发生改变时，没有添加number修饰符（上者）的类型转变为string，而又添加number修饰符（下者）的类型依旧是number：

trim：trim用于去除字符串两边的空格：
示例代码：

    <div id="app">
        <!-- 修饰符：trim自动去除两边空格 -->
        <input type="text" v-model='name'>
        <p>{{name}}</p>

        <input type="text" v-model.trim='names'>
        <p>{{names}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: '',
                names: ''
            },
            methods: {}
        });
    </script>