vue快速入门（十三）v-model的使用

最新推荐文章于 2024-11-04 14:35:19 发布

代码对我眨眼睛

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量510

点赞数 3

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73756108/article/details/137057750

版权

vue2 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

注释很详细，直接上代码

新增内容

数据双向绑定
数据清空方法

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #all{
      width: 500px;
      height: 300px;
      margin: 100px auto;
      background-color: rgb(195, 195, 195);
      border-radius: 10px;
      padding-top: 80px;
      box-sizing: border-box;
    }
    #center{
      margin: 0 auto;
      width: 300px;
    }

    #title{
      margin: 10px;
    }

    input{
      margin: 10px 0;
    }
    button{
      width: 240px;
      margin-top: 10px;
    }
    #text_{
      width: 70px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root">
    <div id="all">
      <div id="center">
      <div>
        <div>
          <span id="text_">用户名：</span>
          <!-- 此处为双向绑定，与微信小程序的差异，vue支持任意层级的数据绑定，微信小程序只能绑定到第一级目录 -->
          <input type="text" v-model="userdata.username">
        </div>
        <div>
          <span id="text_">密码：</span>
          <input type="password" v-model="userdata.password">
        </div>
       <div id="button_">
        <div>
          <button id="login" @click="login">登录</button>
        </div>
        <div>
          <button id="reset" @click="reset">重置</button>
        </div>
       </div>
      </div>  
      </div>
    </div>
  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
       userdata:{
         username:'',
         password:''
       }
      },
      methods: {// 方法
        // 登录
        login(){
          console.log(this.userdata.username,this.userdata.password)
        },
        // 重置
        reset(){
          this.userdata.username = ''
          this.userdata.password = ''
        }
      }
    })
  </script>
</body>
</html>