Vue的基础知识:v-model的原理,由:value与@input合写。

原理:v-model本质上是一个语法糖,比如应用在输入框上,就是value属性input事件的合写。(补充说明:语法糖就是语法的简写)

作用:提供数据的双向绑定

1.数据变,视图(也就是浏览器上的内容)跟着变:value

2.视图变,数据也跟着变@input

注意:$event用于在模版中,获取事件的形参。(对于输入框而言就是e)

下面进行代码演示:

App.vue代码:

<template>
  <div>
    <input v-model="msg1" type="text"> <br><br>
    <!-- 下面这里必须用$event不能用e -->
    <!-- <input :value="msg2" type="text" @input="msg2=e.target.value"> 这是错误的 -->
    <input :value="msg2" type="text" @input="msg2=$event.target.value">
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg1:'',
      msg2:''
    }
  }
}
</script>

上述代码说明v-model应用在输入框上就是由:value和@input组成的。

相关推荐

  1. Vuev-model原理

    2024-06-09 03:16:01       46 阅读
  2. v-model 原理

    2024-06-09 03:16:01       55 阅读
  3. VUEv-modelv-bind区别及其使用

    2024-06-09 03:16:01       60 阅读
  4. v-model实现原理

    2024-06-09 03:16:01       35 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-09 03:16:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-09 03:16:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-06-09 03:16:01       82 阅读
  4. Python语言-面向对象

    2024-06-09 03:16:01       91 阅读

热门阅读

  1. Go go-redis应用

    2024-06-09 03:16:01       22 阅读
  2. 代码随想录算法训练营第36期DAY51

    2024-06-09 03:16:01       32 阅读
  3. diffusers 使用脚本导入自定义数据集

    2024-06-09 03:16:01       36 阅读
  4. 【设计模式】装饰器模式(结构型)⭐⭐

    2024-06-09 03:16:01       30 阅读
  5. 电商API在促进销售与营销中的影响

    2024-06-09 03:16:01       31 阅读
  6. Zookeeper 详解:分布式协调服务的核心概念与实践

    2024-06-09 03:16:01       34 阅读
  7. Pytorch中的广播机制

    2024-06-09 03:16:01       30 阅读
  8. Access数据中的SQL偏移注入

    2024-06-09 03:16:01       32 阅读
  9. 在Spark SQL中,fillna函数

    2024-06-09 03:16:01       29 阅读
  10. SELinux:安全增强型Linux

    2024-06-09 03:16:01       22 阅读
  11. 嵌入式C中Hex与Bin文件对比分析

    2024-06-09 03:16:01       32 阅读
  12. 数据结构学习笔记-二叉树

    2024-06-09 03:16:01       21 阅读