Vue：双向绑定指令v-model简介和基本使用-程序员宅基地

双向绑定指令

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变
作用：给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

语法：v-model=“变量”

**需求：**使用双向绑定实现以下需求

点击登录按钮获取表单中的内容
点击重置按钮清空表单中的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取]或[设置]表单元素的内容
     -->
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      
      el: '#app',
      data: {
      
        username: '',
        password: ''
      },
      methods: {
      
        login () {
      
          console.log(this.username, this.password)
        },
        reset () {
      
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    textarea {
      
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>小黑学习网</h3>

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input v-model="gender" type="radio" name="gender" value="1">男
      <input v-model="gender" type="radio" name="gender" value="2">女
      <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="desc"></textarea> 

    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      
      el: '#app',
      data: {
      
        username: '',
        isSingle: false,
        gender: "2",
        cityId: '102',
        desc: ""
      }
    })
  </script>
</body>
</html>

v-model简化代码

1.目标：

父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定

2.如何简化：

v-model其实就是 :value和@input事件的简写

子组件：props通过value接收数据，事件触发 input
父组件：v-model直接绑定数据

3.代码示例

BaseSelect.vue

<template>
  <div>
    <select :value="value" @change="selectCity">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
    
  props: {
    
    value: String,
  },
  methods: {
    
    selectCity(e) {
    
      this.$emit('input', e.target.value)
    },
  },
}
</script>

<style>
</style>

App.vue

<template>
  <div class="app">
    <BaseSelect
      v-model="selectId"
    ></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
    
  data() {
    
    return {
    
      selectId: '102',
    }
  },
  components: {
    
    BaseSelect,
  },
}
</script>

<style>
</style>

v-model原理

1.原理：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和 input事件的合写

<template>
  <div id="app" >
    <input v-model="msg" type="text">

    <input :value="msg" @input="msg = $event.target.value" type="text">
  </div>
</template>

2.作用：

提供数据的双向绑定

数据变，视图跟着变 :value
视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参

<template>
  <div class="app">
    <input type="text"  />
    <br /> 
    <input type="text" />
  </div>
</template>

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

5.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

不过咱们只需要掌握应用在文本框上的原理即可

本文链接：https://blog.csdn.net/weixin_45427648/article/details/137050055

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

什么是大端存储和小端存储-程序员宅基地

文章浏览阅读4.7k次，点赞2次，收藏5次。详细了解大端和小端的存储_大端存储和小端存储

【共读】企业信息安全建设与运维指南（一）_信息安全运营服务实施指南研究-程序员宅基地

文章浏览阅读6.3k次，点赞5次，收藏49次。一、从零开始建设企业信息安全系统：企业信息安全体系分为：信息安全技术体系和信息安全管理体系信息安全技术体系：两个层面： 1.需建设安全相关基础设施和系统，以具备解决相关安全问题的能力。 2.需具备安全运营能力，只有正确部署和使用设备，才能真正保障信息安全。信息安全管理体系：两个层面： 1.具备信息安全相关的制度、规范、流程及策略。 2.具..._信息安全运营服务实施指南研究

python遍历文件夹轻松拷贝所有固定格式的文件_python遍历所有文件复制指定文件?tn=02003390_71_hao_pg-程序员宅基地

文章浏览阅读455次。import osimport shutil def select_file(dir, dir_out): # dir为查询文件路径，dir_out为拷贝路径 if os.path.isfile(dir): if(dir[-4:] == '.bmp' or '.jpg' or 'png'): #拷贝所有以上格式的文件，也可以修改为其他格式 filename = dir.split('\\')[-1] # 提取文件名称 s_python遍历所有文件复制指定文件?tn=02003390_71_hao_pg

Win cuda11+cudnn11网盘下载_win11 cudatookit安装包百度云-程序员宅基地

文章浏览阅读5.1k次，点赞17次，收藏10次。https://pan.baidu.com/s/1IV_lBCeFFM712xx_iXnhqQ 提取码:0pr5_win11 cudatookit安装包百度云

springboot集成thymeleaf时css js加载不出来的问题_springboot thymeleaf 不显示css js-程序员宅基地

文章浏览阅读2.1k次。springboot项目的css 和js默认位置是在static中，所以如果没有另外的修改的话，直接创建一个static文件夹，把css和js放入即可。这里放一个实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>儿童随访记录表</title>  <script src="ht._springboot thymeleaf 不显示css js

用ChatGPT三分钟免费做出数字人视频- 提升自媒体魅力_chatgpt + ai 数字人 csdn-程序员宅基地

文章浏览阅读2.1k次。这里还可以选择背景编辑以更换背景,虚拟人物的位置可以调整,都设置完成后,点击播放按钮,即可播放效果。(ps:未导出视频之前,数字人只是静态。)最后点击’合成’按钮,导出视频。_chatgpt + ai 数字人 csdn

随便推点

计算机毕设Python+Vue疫情期间学生作业线上管理系统（程序+LW+部署）_在线作业管理系统测试用例-程序员宅基地

文章浏览阅读190次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。_在线作业管理系统测试用例