v-model原理，在“radio”、“checkbox”、“select”、修饰符

最新推荐文章于 2024-04-09 14:48:57 发布

yorup

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量963

点赞数

文章标签：前端 vue.js html 开发语言

本文链接：https://blog.csdn.net/m0_48639378/article/details/126140665

版权

v-model基本原理

v-mode在单选框“radio”的使用

v-mode在复选框“checkbox”的使用

v-mode在复选框的多选使用

v-mode在select的使用

v-model的修饰符

v-model基本原理

首先，介绍一个函数oninput()，即只要在input中输入内容就会触发

v-model的基本原理就是基于oninput，这里用v-on简写的方式绑定“input”=> @input = 'change '，为了实现数据由页面和data数据库的双向流动，将input的value属性动态绑定=> :value='msg'

,change()函数没有调用之前，只能实现单向动态数据绑定=> 数据从data数据库流向页面，change()目的是为了实现页面数据流向data数据库。进而实现数据的双向流动。

change(e)是为了接受input输入的值，e是input，通过e.target.value获取输入的值。

<body>
    <div id="app">
        <label for="acount">账号</label>
        <input type="text" id="acount" :value="msg" @input="change">
        {
  {msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    msg: '无名的人'
                }
            },
            methods: {
                change(e){
                    console.log(1);
                    this.msg = e.target.value;
                }
            }
        });
    </script>
</body>

使用v-model实现数据的双向流动，与上面实例相同，仅仅是直接用一个v-model就可以了，默认传递input的value。

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model="msg">
        <h2>{
  {msg}}</h2>
    </div>
    <script>
        let vm = new Vue({