v-model简易原理

最新推荐文章于 2023-08-22 18:19:51 发布

张续栋

最新推荐文章于 2023-08-22 18:19:51 发布

阅读量573

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_44984407/article/details/103733121

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-model是什么：它是Vue的双向数据绑定指令

作用： 将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。(响应式实际上来说是所有和该数据对应的都会改变)

v-model 用法

v-model 双向数据绑定指令

v-model绑定的属性可以再视区反馈数据 v 和M相互影响
v-model 是vue唯一的双向数据绑定的
v-model 只能再再含有 vule属性的标签中绑定 form表单标签中
v-model 只能绑定data成员，不能绑定表达式就是不能有其它的东西比如说加减乘除等等

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .apple {
        color: blue;
    }
    .pear {
        font-size: 25px;
    }

    .orange {
        background: hotpink
    }
</style>

<body>
    <div id="app">
        <h2>v-model</h2>
        <p>{{city}}</p>
        <p> <input type="text" :value="city"></input></p>
        <p> v-model是做属性绑定的只能绑定 value<input type="text" v-model="city"></input>
        </p>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                city: '北京',
                weather: 'snow'
            },
            // 给vue设置方法的
            methods: {
            }
        })
    </script>
</body>

</html>

原理

本质上来说： v-model=“feel” 是 :value=“feel” @input=“feel = $event.target.value” 的缩写。

用oninput来时刻感知表单框的变化
每当表单有变化就调用 feel
feel会将表单的内容赋值给data中对应的数据，对对应的数据进行更新
当data的数据改变后， data的数据再影响对应的其它有使用该数据的地方，将他们更新

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>v-model 简易原理</h1>
        <h2>v-model双向数据绑定</h2>
        <!-- <input v-model="xxx"> -->
        <p>{{ weather }}</p>
        <p> v-bind属性绑定：<input type="text" :value="weather" /> </p>
        <!-- oninput事件：可以感知到输入框的输入状态 -->
        <p> v-model简易原理1：<input type="text" @input="feel" :value="weather" /> </p>
        <!-- 在标签事件内部可以直接使用$event关键字，代表事件对象 -->
        <p> v-model简易原理2：<input type="text" @input="weather = $event.target.value" :value="weather" /> </p>
    </div>

    <script src="../vue.js"></script>

    <script>
        var vm = new Vue({
            // Vue实例内部
            el: '#app',
            data: {
                weather: '雪'
            },
            methods: {
                // 感知输入框输入状态
                feel(evt) {
                    // evt：事件对象  InputEvent ，键盘输入的事件对象
                    // console.log(evt)
                    // console.dir(evt.target) // 触发当前事件的输入框的dom节点对象
                    // console.dir(evt.target.value) // 触发当前事件的输入框输入的信息
                    // 把输入框输入的信息赋予给weather
                    this.weather = evt.target.value
                }
            }
        })
    </script>
</body>

</html>

张续栋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model简易原理

v-model是什么：它是Vue的双向数据绑定指令作用：将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。(响应式实际上来说是所有和该数据对应的都会改变)v-model 用法v-model 双向数据绑定指令v-model绑定的属性可以再视区反馈数据 v 和M相互影响v-model 是vue唯一的双向数据绑定...
复制链接

扫一扫