Vue.js-v-model

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

guardwhy

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

阅读量392

点赞数

分类专栏： # Vue.js

本文链接：https://blog.csdn.net/hxy1625309592/article/details/116110307

版权

本文详细介绍了Vue.js中v-model的使用，包括其基本用法、原理、与不同表单元素（如radio、checkbox、select）的结合，以及值绑定和修饰符的应用。v-model作为双向数据绑定的语法糖，通过v-bind和v-on实现了数据和视图的实时同步。

摘要由CSDN通过智能技术生成

1.1 v-model基本使用

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

案例的解析

当输入框输入内容时，因为input中的v-model绑定了message。所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
所以，通过v-model实现了双向的绑定。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <input type="text" v-model="message">
      <h2>{
  {message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
    
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
    
          message: 'hello Vue.js!!!'
        }
      })
  </script>
</body>
</html>

执行结果

1.2 v-mode的原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作

v-bind绑定一个value属性。
v-on指令给当前元素绑定input事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model使用原理</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <!--输入和监听-->
      <input type="text" :value="message" @input="message = $event.target.value">

      <h2>{
  {message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
    
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
    
          message: 'hello world!'
        },
        // 方法
        methods: {
    
          valueChange(event){
    
            this.message = event.target.value;
          }
        }
      })
  </script>
</body>
</html>