Vue笔记- “v-model“的原理

最新推荐文章于 2024-07-15 17:15:41 发布

Green8y0

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量78

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/init_8y0/article/details/115361385

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

前言
一、代码
二、演示效果
总结

前言

Vue笔记- "v-model"的原理

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>--------------------------methods的写法--------- ----------------------</h2>
  <input type="text" :value="message1" @input="valueChange">
  <h2>message1 = {{message1}}</h2>

  <h2>------------------------$event.target.value的写法---------  -----------</h2>
  <input type="text" :value="message2" @input="message2 = $event.target.value">
  <h2>message2 = {{message2}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data() {
      return {
        message1: '',
        message2: ''
      }
    },
    methods: {
      valueChange(e) {
        // v-model的原理
        // 1.@input监听用户的输入
        // 2.e.target.value获取input框的value
        // 3.赋值给data变量
        this.message1 = e.target.value
      }
    }
  })
</script>
</body>
</html>

二、演示效果

在这里插入图片描述

总结

v-model的原理

1.绑定v-on:input监听用户输入

2.绑定v-bind:value属性

Green8y0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记- “v-model“的原理

文章目录前言一、代码二、演示效果总结前言Vue笔记- "v-model"的原理一、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>-----------------------
复制链接

扫一扫