1.背景

2.简单使用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!--<script src="./js/vue.js"></script>-->

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  请输入你的姓名:<input v-model="name">

  <br>

  你输入的名称为:{{name}}

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: 'v-model之双向绑定',

      name: 'ldp',

      number: 60

    }

  });

</script>

</body>

</html>

3.双向绑定原理

<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!--<script src="./js/vue.js"></script>-->

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  <pre>

    原理:

    原理很简单,

    第一步:使用v-bind给value元素赋值,

    第二步:使用v-on:input监听input输入的变化

  </pre>

  <h4>v-model实现双向绑定</h4>

  请输入你的姓名:<input v-model="name">

  <br>

  你输入的名称为:{{name}}

  <hr>

  <h4>自己写代码实现双向绑定(v-bind与v-on配合使用就可以了)</h4>

  请输入你的姓名:<input v-bind:value="name2" v-on:input="name2=$event.target.value">

  <br>

  你输入的名称为:{{name2}}

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: 'v-model之原理',

      name: 'ldp',

      name2: 'ldp2',

      number: 60

    }

  });

</script>

</body>

</html>

4.单选框

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!--<script src="./js/vue.js"></script>-->

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  请输入你的性别:

  <label for="male">

    <input id="male" type="radio" v-model="gender" value="1"> 男

  </label>

  <label for="female">

    <input id="female" type="radio" v-model="gender" value="2"> 女

  </label>

  <label for="other">

    <input id="other" type="radio" v-model="gender" value="3"> 其他

  </label>

  <br>

  你输入的性别为:{{gender}}

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: 'v-model之radio单选框实现',

      name: 'ldp',

      gender: '',

      number: 60

    }

  });

</script>

</body>

</html>

5.复选框

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!--<script src="./js/vue.js"></script>-->

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  请选择你喜欢的开发语言:

  <label for="java">

    <input id="java" type="checkbox" v-model="language" value="1"> java

  </label>

  <label for="c">

    <input id="c" type="checkbox" v-model="language" value="2"> c

  </label>

  <label for="c++">

    <input id="c++" type="checkbox" v-model="language" value="3"> c++

  </label>

  <label for="c#">

    <input id="c#" type="checkbox" v-model="language" value="4"> c#

  </label>

  <br>

  你输入的性别为:{{language}}

  <hr>

  <label for="check">

    <input id="check" type="checkbox" v-model="checked"> 请勾选协议

  </label>

  <br>

  你是否勾选了勒:{{checked}}

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: 'v-model之checkbox复选框实现',

      name: 'ldp',

      language: [],

      checked: false,

      number: 60

    }

  });

</script>

</body>

</html>

6.下拉框

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!--<script src="./js/vue.js"></script>-->

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  请选择你出生的月份:

  <select v-model="month">

    <option value="1">1月</option>

    <option value="2">2月</option>

    <option value="3">3月</option>

    <option value="4">4月</option>

    <option value="5">5月</option>

    <option value="6">6月</option>

    <option value="7">7月</option>

    <option value="8">8月</option>

    <option value="9">9月</option>

    <option value="10">10月</option>

    <option value="11">11月</option>

    <option value="12">12月</option>

  </select>

  <br>

  你选择的月份是:{{month}}

  <hr>

  请选择你去过的城市:

  <select v-model="city" multiple>

    <option value="1">成都</option>

    <option value="2">北京</option>

    <option value="3">上海</option>

    <option value="4">广州</option>

  </select>

  <br>

  你选择的月份是:{{city}}

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: 'v-model之select下拉框选择',

      month: '',

      city: [],

      name: 'ldp',

      language: [],

      checked: false,

      number: 60

    }

  });

</script>

</body>

</html>

7.修饰符

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!--<script src="./js/vue.js"></script>-->

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  请输入你的名字:

  <input v-model.lazy="name">

  <br>

  v-model.lazy失去焦点后在显示:{{name}}

  <hr>

  请输入你的年龄:

  <input type="number" v-model.number="age">

  <br>

  v-model.number只能输入数字:{{age}}

  <hr>

  请输入你的家庭地址:

  <input v-model.trim="address">

  <br>

  v-model.trim会去掉首尾空格:{{address}}

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: 'v-model之select下拉框选择',

      name: '',

      age: null,

      address: ''

    }

  });

</script>

</body>

</html>

完美!

vue之v-model表单绑定的更多相关文章

  1. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  2. Vue学习笔记之表单绑定

    1. 概述 1.1. 什么是数据的双向绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vu ...

  3. Vue学习笔记之表单绑定输入

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  4. vue 学习三 v-model 表单绑定输入 以及修饰符的用处

    v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...

  5. 应用二：Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...

  6. Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  7. vue -- v-model 表单绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  9. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  10. 用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

    Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...

随机推荐

  1. Python使用.NET开发的类库来提高你的程序执行效率

    Python由于本身的特性原因,执行程序期间可能效率并不是很理想.在某些需要自己提高一些代码的执行效率的时候,可以考虑使用C#.C++.Rust等语言开发的库来提高python本身的执行效率.接下来, ...

  2. Mirror多人联网发布阿里云

    Mirror多人联网发布阿里云 新建模板小书匠 将mirror网络地址和端口选为你阿里云服务器上开放的公网地址和端口 IP与端口 2. 在阿里云服务器安全组中开放你所制定的端口 开放阿里云端口 3. ...

  3. python 第一次主要是if while 奇偶数的练习

    例如输出1-10的数字,但是7除外. a=1 while a < 11: if a == 7: pass else: print(a) a=a+1 输出1-100所以的偶数 a=1 while ...

  4. Android 中的 perfboot工具

    背景 开机首先加载bootloader,由bootloader启动kernel,然后运行init程序,有init启动Zygote,Zygote进程启动SystemServ进程,在SystemServe ...

  5. STM32 CubeMX 学习：05-串口

    --- title: mcu-stm32-cube-05-using-serial.md date: 2020-03-09 10:37:34 categories: tags: - stm32 - c ...

  6. 【动画进阶】类 ChatGpt 多行文本打字效果

    今天我们来学习一个有意思的多行文本输入打字效果,像是这样: 这个效果其实本身并非特别困难,实现的方式也很多,在本文中,我们更多的会聚焦于整个多行打字效果最后的动态光标的实现. 也就是如何在文本不断变长 ...

  7. 从 Helm 到 Operator：Kubernetes应用管理的进化

    Helm 的作用 在开始前需要先对 kubernetes Operator 有个简单的认识. 以为我们在编写部署一些简单 Deployment 的时候只需要自己编写一个 yaml 文件然后 kubec ...

  8. 新一代的团队协作平台-Teamlinker

    Teamlinker是一个集成了不同功能和模块的团队协作平台.你可以联系你的团队成员,分配你的任务,开始一个会议,安排各项事务,管理你的文件等.并且支持线下免费部署,功能和线上版本一致. 主页 对于很 ...

  9. [oeasy]python0031_挂起进程_恢复进程_进程切换

    ​ 查看进程 回忆上次内容 上次修改了 $PATH 路径 把当前用户shiyanlou的宿主文件夹 ~ 添加到 $PATH 中 这样 sleep.py 就可以被找到 于是就可以被执行了 还可以把配置 ...

  10. GIS前沿技术

    无论是初步接触到GIS的学生,还是对GIS已经有一定的了解的从业者,肯定都非常关心两个问题:GIS有没有发展前景,GIS有哪些应用价值? 关于这两个问题,笔者的答案是GIS作为一门融合了空间数据采集. ...