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. __proto__和[[Prototype]]的区别

    __proto__和[[Prototype]]的区别 先看下面这一段代码: const obj1 = Object.create(null); // very plain object obj1.__ ...

  2. ITMS-90717: 无效的应用程序商店图标

    PS导入照片 图像->模式->索引颜色 透明度去掉打勾保存即可

  3. 5分钟了解LangChain的路由链

    上上篇文章<5分钟理透LangChain的Chain>里用到了顺序链SequentialChain,它可以将多个链按顺序串起来.本文介绍LangChain里的另外1个重要的链:路由链. 1 ...

  4. Linux unset命令用法

    Linux unset命令用于删除变量或函数. unset为shell内建指令,可删除变量或函数 参数: -f 仅删除函数 -v 仅删除变量 [root@localhost ~]# yangzc=&q ...

  5. Spark Structured Streaming（一）基础

    1. 流处理的场景 我们在定义流处理时,会认为它处理的是对无止境的数据集的增量处理.不过对于这个定义来说,很难去与一些实际场景关联起来.在我们讨论流处理的优点与缺点时,先介绍一下流处理的常用场景. 通 ...

  6. Android 8.0 开机时间优化

    Android 8.0 开机时间优化 背景 在嵌入式行业中,有些搭载 了Android系统的设备由于 开机时间 过长而导致无法被接受. 介绍 启动时间是系统性能的重要组成部分,因为用户必须等待启动完成 ...

  7. HTTP协议 学习：0-有关概念

    HTTP协议 学习:0-有关概念 背景 实际上,HHTP协议是一种比较简单的协议,它的本质上是一个文本协议,在实际开发中,我们重点关注解析对方发来的内容的过程(字符串匹配). 参考资料: HTTP H ...

  8. Spark3学习【基于Java】1. Spark-Sql入门程序

    spark-sql是用来处理结构化数据的模块,是入门spark的首要模块. 技术的学习无非就是去了解它的API,但是Spark有点难,因为它的例子和网上能搜到的基本都是Scala写的.我们这里使用Ja ...

  9. python tkinter | 如何使得entry文本框靠右显示，从右向左填充，显示文本末尾

    from tkinter import * from tkinter import filedialog app = Tk() app.title("ABC") app.geome ...

  10. SQL Thinking

    s2下半年我在内部有一次部门级别的技术分享会,以本文内容分享为主. 其实有很多人问过我相同的问题,遇到需要改写的慢sql,不知道怎么改,改好了以后也不知道等不等价?不等价了也不知道错在哪?这个要怎么破 ...