可能是全网vue v-model最详细讲解教程

目录
  • v-model是什么
  • 为什么使用v-model?
  • 什么场景下会使用v-model?
  • v-model的原理
  • 那v-model是双向绑定吗?
  • 那 v-model 是单向数据流吗?
    • 什么是单项数据流?
    • v-model 的做法是怎样的?
  • v-model的绑定
    • 我们来看一下绑定textarea
    • v-model绑定checkbox
    • v-model绑定radio
  • v-model绑定select
  • v-model的值绑定
  • v-model修饰符 - lazy
    • lazy修饰符是什么作用呢?
    • v-model修饰符 - number
    • v-model修饰符 - trim
  • 总结

v-model是什么

v-model 是Vue框架的一种内置的API指令,本质是一种语法糖写法。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

为什么使用v-model?

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理;

什么场景下会使用v-model?

表单提交是开发中非常常见的功能,也是和用户交互的重要手段:比如用户在登录、注册时需要提交账号密码;比如用户在检索、创建、更新信息时,需要提交一些数据; 这些都要求我们可以在代码逻辑中获取到用户提交的数据,我们通常会使用v-model指令来完成

示例:v-model的基本使用

v-model的原理

官方有说到,v-model的原理其实是背后有两个操作:

  • v-bind绑定value属性的值;
  • v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中;

那v-model是双向绑定吗?

是的你可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。—— vue2官方文档

那 v-model 是单向数据流吗?

是的,虽然官方没有明确表示这点,但我们可以捋一捋两者的关系。

什么是单项数据流?

父组件可以向子组件传递数据,并且改变子组件的值,而子组件不能改变父组件传递给它的 prop 属性,官方推荐的做法是它抛出事件,通知父组件自行改变绑定的值。

v-model 的做法是怎样的?

v-model 做法完全符合单项数据流。甚至于,它给出了一种在命名和事件定义上的规范。 众所周知 .sync 修饰符是单向数据流的另一个典型范式。

单向数据流:总结起来其实也就8个字:数据向下,事件向上

那接下来,我们再来看一下v-model是如何绑定一下其他的表单类型:textarea、checkbox、radio、select等属性的

v-model的绑定

我们来看一下绑定textarea

  <div class="demo">
    <textarea v-model="article" cols="30" rows="10"> </textarea>
    <h2>article当前的值是:{{ article }}</h2>
  </div>
export default {
  name: 'textarea',
  data () {
    return {
      article: "a"
    }
  }
}

效果:

v-model绑定checkbox

我们来看一下v-model绑定checkbox:单个勾选框和多个勾选框

  • 单个勾选框:v-model即为布尔值。此时input的value并不影响v-model的值。
  • 多个复选框:当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。当选中某一个时,就会将input的value添加到数组中。

单选框示例:

export default {
  name: 'checkbox',
  data () {
    return {
      isAgree: "true"
    }
  }
}

效果:

  <!-- 一般对应数组类型 -->
      <input type="checkbox" v-model="sport" value="篮球" />篮球
      <input type="checkbox" v-model="sport" value="足球" />足球
      <input type="checkbox" v-model="sport" value="羽毛球球" />羽毛球球
      <input type="checkbox" v-model="sport" value="兵乓球" />兵乓球
      您的爱好有:{{ sport }}
export default {
  name: 'demo',
  data () {
    return {
      sport: [],
    }
  }
}

效果示例:

v-model绑定radio

v-model绑定radio,用于选择其中一项;

        <label for="man">
            <input type="radio" value="男" v-model='sex' id="man">男
        </label>
        <label for="girl">
            <input type="radio" value="女" v-model='sex' id="girl">女
        </label> 您选中的是:{{sex}}
export default {
  name: 'demo',
  data () {
    return {
     sex: '',
    }
  }
}

效果示例:

v-model绑定select

和checkbox一样,select也分单选和多选两种情况。

  • 单选:只能选中一个值,v-model绑定的是一个值。当我们选中option中的一个时,会将它对应的value赋值到fruit中;
  • 多选:可以选中多个值,v-model绑定的是一个数组。当选中多个值时,就会将选中的option对应的value添加到数组fruit中;
<select name="abc" v-model="fruits2" multiple>
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="橙子">橙子</option>
        <option value="榴莲">榴莲</option>
      </select>
export default {
  name: 'demo',
  data () {
  return {
       fruits2: [],
  }
  }
}

效果示例:

<select name="abc" v-model="fruits2" multiple size="3>
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="橙子">橙子</option>
        <option value="榴莲">榴莲</option>
      </select>

效果示例:

v-model的值绑定

目前我们在前面的案例中大部分的值都是在template中固定好的:比如gender的两个输入框值male、female;比如hobbies的三个输入框值basketball、football、tennis. 在真实开发中,我们的数据可能是来自服务器的,那么我们就可以先将值请求下来,绑定到data返回的对象中,再通过v-bind来进行值的绑定,这个过程就是值绑定。这里不再给出具体的做法,因为还是v-bind的使用过程。

v-model修饰符 - lazy

lazy修饰符是什么作用呢?

默认情况下,v-model在进行双向绑定时,绑定的是input事件,那么会在每次内容输入后就将最新的值和绑定的属性进行同步;,如果我们在v-model后跟上lazy修饰符,那么会将绑定的事件切换为 change 事件,只有在提交时(比如回车)才会触发

      <!-- 修饰符    lazy/number/trim -->
      <!-- lazy  失去焦点后才改变点击enter-->
      <!-- 口默认情况下, V- model默认是在input事件中同步输入框的数据的。口也就是说, - -旦有数据发生改变对应的data中的数据就会自动发生 改变。口lazy修饰符可以让数据在失去焦点或者回车时才会更新:-->
      <input type="text" v-model.lazy="message" />
      <br />
      {{ message }}
export default {
  name: 'demo',
  data () {
    return {
       message: "内容",
    }
  }
}

效果示例:

v-model修饰符 - number

我们先来看一下v-model绑定后的值是什么类型的:message总是string类型,即使在我们设置type为number也是string类型;

如果我们希望转换为数字类型,那么可以使用 .number修饰符:

另外,在我们进行逻辑判断时,如果是一个string类型,在可以转化的情况下会进行隐式转换的: 下面的score在进行判断的过程中会进行隐式转化的

效果示例:

v-model修饰符 - trim

如果要自动过滤用户输入的守卫空白字符,可以给v-model添加 trim修饰符

效果示例:

码上掘金代码片段

全部示例代码:

<!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>
    <!-- 引入Vue -->
    <script src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 表单绑定v-model的双向绑定
        当我们在输入框输入内容时,因为input中的v-model绑定了message ,所以会实时将输入的内容传递给message ,
        message发生改变。内容传递给message , message发生改变。message的值插入到DOM中,所以DOM会发生响应的改变。0所以,通过v-model实现了双向的绑定。-->
        <input type="text" v-model="message"> {{message}}
        <br>
        <!-- v-model和radio的结合使用 -->
        <label for="man">
            <input type="radio" value="男" v-model='sex' id="man">男
        </label>
        <label for="girl">
            <input type="radio" value="女" v-model='sex' id="girl">女
        </label> 您选中的是:{{sex}}
        <br>
        <!-- 复选框   一般对应布尔类型-->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="agree">同意
        </label>
        <button :disabled="!agree">下一步</button> 您的选择:{{agree}}

        <br>
        <!-- 一般对应数组类型 -->
        <input type="checkbox" v-model="sport" value="篮球">篮球
        <input type="checkbox" v-model="sport" value="足球">足球
        <input type="checkbox" v-model="sport" value="羽毛球球">羽毛球球
        <input type="checkbox" v-model="sport" value="兵乓球">兵乓球 您的爱好有:{{sport}}

        <br>
        <!-- select  单选-->
        <select name="abc" v-model='fruits'>
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
            <option value="橙子">橙子</option>
            <option value="榴莲">榴莲</option>
        </select> 您选中的水果是{{fruits}}

        <br>
        <br>

        <!-- 多选 -->
        <select name="abc" v-model="fruits2" multiple>
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
            <option value="橙子">橙子</option>
            <option value="榴莲">榴莲</option>
        </select>
        <br> 您选中的水果是{{fruits2}}
        <br>
        <!-- 值绑定 -->
        <label v-for="item in origintobbies" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
        </label>
        <br> 您的爱好是{{hobbies}}
        <br>
        <!-- 修饰符    lazy/number/trim -->
        <!-- lazy  失去焦点后才改变点击enter-->
        <!-- 口默认情况下, V- model默认是在input事件中同步输入框的数据的。口也就是说, - -旦有数据发生改变对应的data中的数据就会自动发生 改变。口lazy修饰符可以让数据在失去焦点或者回车时才会更新:-->
        <input type="text" v-model.lazy="message">
        <br> {{message}}
        <br>
        <!-- number 转化为数字类型-->
        <!-- 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被 当做字符串类型进行处理。口但是如果我们]希望处理的是数字类型,那么最好直接将内容当做数字处理。o number修饰符可以让在输入框中输入的内容自动转成数字类型:-->
        <input type="text" v-model.number="age">
        <br> {{age}}--{{typeof age}}
        <br>
        <!-- trim 去除空格 -->
        <!-- trim修饰符可以过滤内容左右两边的空格 -->
        <input type="text " v-model.trim="name">
        <br> {{name}}
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "内容",
                sex: '',
                // 当要 默认选中时要填入值即可 例:sex='男'
                agree: false,
                sport: [],
                fruits: '',
                fruits2: [],
                hobbies: [],
                origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"],
                age: 0,
                name: ''
            },
        })
    </script>
</body>
</html>

总结

到此这篇关于vue v-model最详细讲解的文章就介绍到这了,更多相关v-model详细讲解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue 2.0组件与v-model详解

    前言 大家可能乍一看这个标题,可能会有疑问:v-model和组件也能扯到一起?在打算写这篇文章的时候,也是这么想的.咱们按简历的那一套STAR法则来梳理一下这篇文章: 情景[Situation]: 编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA, 而是父组件可以直接this.dataA就可以取到当前子组件最新值. 任务[Task]: 实现在父组件直接this.dataA就可以取到当前子

  • vue.js指令v-model使用方法

    vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g

  • vue中input的v-model清空操作

    问题来源 写input组件的时候需求一个清空按钮,但是如果直接修改prop中父级的传值会报错.但是如果不修改父级无法更新值,也会带来开发的问题. 解决 v-model 完成大部分数据双向绑定 <input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.va

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • 浅谈 Vue v-model指令的实现原理

    vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定, 我们来看一下它的效果: 输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化 我们可以参照官方文档的例子    http://cn.vuejs.org/v2/guide/forms.html#文本 我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的 如此神奇的效果是如何实现的呢? 还是参照官方文档 http://cn.vuejs.org/v2/guide/co

  • vue v-model的用法解析

    v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.

  • Vue 进阶教程之v-model详解

    Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2  v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但

  • vue中v-model的应用及使用详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model本质上是一个语法糖.如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.t

  • vue如何在自定义组件中使用v-model

    v-model指令 所谓的"指令"其实就是扩展了HTML标签功能(属性). 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child @returnBack="turnBack" :give="st

  • Vue computed计算属性详细讲解

    目录 一.计算属性computed 1.1.什么是计算属性computed 1.2.复杂数据的处理-computed 1.3.计算属性的缓存 1.4.计算属性computed的setter和getter 一.计算属性computed 1.1.什么是计算属性computed computed 是基于它的依赖缓存,只有在它的相关依赖发生改变时才会进行更新.官方文档是这样说的:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性 1.2.复杂数据的处理-computed 拼接字符串.分数是否及格.m

  • 一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)

    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api. 本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 二.目

  • spring mvc4中相关注解的详细讲解教程

    前言 在开始本文之前要说明以下,首先我是一个初学springmvc,抱着去加深印象的目的去整理相关springmvc4的相关注解,同时也希望给需要相关查阅的读者带来帮助,好了,下面话就不多说了,一起来看看详细的介绍吧. 1.@Controller Controller控制器是通过服务接口定义的提供访问应用程序的一种行为,它解释用户的输入,将其转换成一个模型然后将试图呈献给用户.Spring MVC 使用 @Controller 定义控制器,它还允许自动检测定义在类路径下的组件并自动注册.如想自动

  • Vue项目环境搭建详细总结

    关于Vue安装的详细步骤总结 安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用

  • Vue UI创建项目详细步骤

    1.首先要安装最新的Vue CLI 在命令行工具里输入一下命令 npm install -g @vue/cli 或者 yarn global add @vue/cli 安装成功后,可用vue -V命令查看已安装的Vue CLI版本 2.在命令行运行 vue ui,就会出现图形化管理 在界面上可以看到第一个tab项目,点击创建这个tab ,可以来创建一个新的vue项目 3.点击了创建之后可以看到一下内容,可以项目创建一个目录或者选择一个目录,然后选择一种包管理工具:可以使npm,也可以是yarn等

  • Vue 2.0 基础详细

    目录 1.特点 2.实例 3.选项 Options 4.基本语法 5.生命周期 6.路由管理Vue-Router 6.1 路由配置 6.2 路由跳转 6.3 路由守卫 7.状态管理器Vuex 7.1 配置 8.五大核心属性 9.Http请求库Axios 1.特点 是一个MVVM框架 由MVC架构衍生,分为View(视图层).ViewModel(数据视图层).Model(数据层),MVVM 最标志性的特性就是 数据绑定,实现数据驱动视图,视图同步数据. 数据也是单向的,称之为单向数据流 数据总是从

  • vue v-model的详细讲解(推荐!)

    目录 v-model的基本使用 v-model的原理 v-model绑定textarea v-model绑定checkbox v-model绑定radio v-model绑定select v-model的值绑定 v-model修饰符 - number v-model修饰符 - trim 附:父子组件v-model绑定的参数进行通信 总结 v-model的基本使用 表单提交是开发中非常常见的功能,也是和用户交互的重要手段: 比如用户在登录.注册时需要提交账号密码: 比如用户在检索.创建.更新信息时

  • 详解Vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: ''' <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) ''' 直接写一个监听处理函数,当每次监听到

  • Vue路由vue-router详细讲解指南

    中文文档:https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转: 首先我们来学习三个单词(route,routes,router): route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由: routes:它是个复数,表示多个的集合才能为复数:即我们可以理解为

  • vue实现动态路由详细

    目录 一.前端控制 1.在router.js文件(把静态路由和动态路由分别写在router.js) 2.store/permission.js(在vuex维护一个state,通过配角色来控制菜单显不显示) 3.src/permission.js 4.侧边栏的可以从vuex里面取数据来进行渲染 二.后端控制路由 1.store/permission.js,在vuex里面发送请求获取数据 2.整理一份数据结构,存到表里 3.写一个转化方法,把获取到的数据转换成router结构 主流的实现方式: 简单

随机推荐

其他