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. 【大道至简】NetCore3.1快速开发框架一：介绍

    新的一年开始,祝大家2020新年快乐! 去年开源了一个基于NetCore2.2的框架,好多好基友还是比较喜欢的 github地址:https://github.com/feiyit/FytSoaCms ...

  2. es6.6.1 rest常规操作

    ES 内置的REST接口/ 获取版本信息/index/_search 搜索指定索引下的数据 test/_search/_aliases 获取或者操作索引下的别名 _aliases/index/ 查看指 ...

  3. Linux 提权-Capabilities

    本文通过 Google 翻译 Capabilities – Linux Privilege Escalation - Juggernaut-Sec 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字 ...

  4. 中国电信登录RSA算法+分析图文

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 中国电信登录RSA算法+分析图文 日期:2016-9-30 ...

  5. C++与Unity C#交互

    C++与Unity C#交互 C++转C#小工具:https://github.com/jaredpar/pinvoke-interop-assistant C++ Custom.h #pragma ...

  6. Linux 内核：设备树（1）dtb格式

    Linux 内核:设备树(1)dtb格式 背景 dtb作为二进制文件被加载到内存中,然后由内核读取并进行解析,如果对dtb文件的格式不了解,那么在看设备树解析相关的内核代码时将会寸步难行,而阅读源代码 ...

  7. QT学习：04 代码化的界面绘制

    --- title: framework-cpp-qt-04-代码化的界面绘制 EntryName: framework-cpp-qt-04-ui-design-by-code date: 2020- ...

  8. Mac下安装Redis，附可视化工具Medis

    导读 我之前写过很多相关的redis的博文,有时候,为了开发,还得去虚拟机上搭建一个redis,感觉太麻烦了,为了做个demo,直接在自己mac本上安装一个即可. Redis 从入门到精通:点我直达 ...

  9. SpringBoot彩蛋之定制启动画面

    写在前面 在日常开发中,我们经常会看到各种各样的启动画面.例如以下几种 ① spring项目启动画面 ② mybatisplus启动画面 ③若依项目启动画面 还有很多各式各样好看的启动画面,那么怎么定 ...

  10. 松灵机器人scout mini小车 自主导航(3)——建图导航仿真

    松灵机器人Scout mini小车建图导航仿真 在之前的文章中,我们已经介绍了如何在gazebo和rviz对scout mini小车进行仿真,并且测试了添加自定义的传感器,在本文章中将进一步介绍如何利 ...