首页 / VUE / Vue中v-model指令的分析（附代码）

Vue中v-model指令的分析（附代码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue中v-model指令的分析（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7177字，纯文字阅读大概需要11分钟。

内容图文

这篇文章给大家介绍的文章内容是关于Vue中v-model指令的分析（附代码），有很好的参考价值，希望可以帮助到有需要的朋友。

1. 指令释义

v-model在表单控件或者组件上创建双向绑定，本质上是负责监听用户的输入事件（onchange，onkeyup，onkeydown等，具体是哪个，还请查阅官方底层实现文档）以更新数据，并对一些极端场景进行一些特殊处理。

2. 表单输入绑定方式和方法

2.1 input框实现双向数据绑定示例：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><input type="text" v-model="inputs"/><br/>
      <label>你在input框中输入了:</label><span>{{inputs}}</span>
    </div>
  </div>
</template>

<script>
    export default {
        name:"v-model",
      data(){
          return {
            title: 'v-model学习',
            inputs: ''
          }
      }
    }
</script>

<style scoped>
  .p1{
  text-align: left;
  }
  .spancss1{
      float: left;
      }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

2.2 textarea多行文本实现双想数据绑定示例：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><textarea v-model="text"></textarea><br/>
      <label>你在textarea框中输入了:</label><span>{{text}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        text: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

2.3 复选框实现数据绑定

单个复选框数据绑定示例：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><input type="checkbox" id="checkbox" v-model="checked">选我<br/>
      <label v-if="checked">选中了:</label>
      <label v-if="!checked">没选中:</label>
      <span>{{ checked }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        checked: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

多个复选框实现数据绑定示例：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label>
      <input type="checkbox" id="vue1" value="vue1" v-model="checkedValues">vue1
      <input type="checkbox" id="vue2" value="vue2" v-model="checkedValues">vue2
      <input type="checkbox" id="vue3" value="vue3" v-model="checkedValues">vue3
      <br/>
      <label>选中了：</label><span>{{ checkedValues }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        checkedValues: []
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

2.4 单选按钮实现数据绑定，获取到选中的单选按钮值显示出来：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <input type="radio" id="radio1" value="1" v-model="checked">男<br/>
      <input type="radio" id="radio2" value="2" v-model="checked">女<br/>
      <label> 选中了：{{ checked }}</label>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        checked: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

2.5 选择框介绍

方式一选择框实现双向数据绑定，首先介绍选择框实现单个选中时情况，当单选框中options设置disabled属性时，此options不能被选中，当单选框中options没有value值时，选中此options时会绑定此options的text文本，当单选框中options有value值时，选中此options时会绑定此options的value值，示例如下：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option value="2">B</option>
        <option value="3">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        selected: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

方式二介绍选择框多个选中情况，首先需要在select中添加multiple属性，当单选框中options设置disabled属性时，此options不能被选中，当单选框中options没有value值时，选中此options时会绑定此options的text文本，当单选框中options有value值时，选中此options时会绑定此options的value值，然后按下ctrl键，点击要选中的options，简单示例如下：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <select v-model="selected" multiple>
        <option disabled value="">请选择</option>
        <option>A</option>
        <option value="2">B</option>
        <option value="3">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        selected: []
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

3. v-model修饰符

3.1 .lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 onchange 事件进行同步，当在输入框输入数据时，数据并不会立即改变，当光标离开输入框以后，数据才会实现同步改变，示例代码如下：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <!-- 在“change”时而非“input”时更新 -->
      <input type="text" id="names" v-model.lazy="msg" ><br/>
      <label>输入值：</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        msg: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

3.2 .number

如果想自动将用户的输入值转为数值类型，把type定义为number类型，给 v-model 添加 number 修饰符，当用户输入数值类型的数据时，v-model.number会自动把输入的数据转换为数值类型，注意如果用户输入特殊字母e，number属性不能识别，简单代码示例如下：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <!-- 在“change”时而非“input”时更新 -->
      <input type="number" id="names" v-model.number="msg" ><br/>
      <label>输入值：</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        msg: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

3.3 .trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符，在输入框起始时候多添加几个空格，当光标离开之后，trim属性会自动过滤收尾空格，简单代码示例如下：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>无trim属性</label>
      <input type="text" id="names" v-model="msg1" ><br/>
      <label>输入值：</label>{{msg1}}<br/>
      <label>有trim属性</label>
      <input type="text" id="names2" v-model.trim="msg2" ><br/>
      <label>输入值：</label>{{msg2}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        msg1: '',
        msg2: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Vue中v-model指令的分析（附代码） - 文章图片

4. 组件中使用v-model

4.1 自定义组件v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像输入框、单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。本文以自定义输入框和onchange事件为例，在输入框输入值，当光标离开以后输入值会输出绑定到置顶位置：

1. 在index中声明组件（在index声明的组件为全局组件，全局可用）：

Vue.component('base-text', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `<input type="text" id="inputs" v-on:change="$emit('change', $event.target.value)">`
});
=

2. 在要使用该组件的插件中声明：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
     <base-text v-model="msg"></base-text><br/>
      <label>你输入了:</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: 'v-model学习',
        msg: ''
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3. 结果示例如下：

Vue中v-model指令的分析（附代码） - 文章图片

内容总结

以上是互联网集市为您收集整理的Vue中v-model指令的分析（附代码）全部内容，希望文章能够帮你解决Vue中v-model指令的分析（附代码）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285527.html

来源：【匿名】

【上一篇】Vue中条件渲染的分析（附代码）【下一篇】php怎么返回数据给vue

更多 ►

【Vue中v-model指令的分析（附代码）】教程文章相关的互联网学习教程文章

vue-cli项目结构分析【图】

总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分1.build——[webpack配置]build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。2.config——[vue项目配置]config文件主要是项目相关配置，我们常用的就是当端口冲突时配...

Vue.js 源码学习笔记 -- 分析前准备待续【代码】

主体　　实例方法归类:　　　　data 数据方法　　　　dom dom方法　　　　event 事件处理　　　　lifecycl 生命周期函数　　　　init 初始化vue页面　　全局方法:　　　　derectives filters init过程 data : observer deps computed watch || watcher template: fragment [ directive repeat if component transition filter ]重点: 把数据(Model) 和视图(View) 建立关联1. 通过observer 对 data 监听, 包括监听...

vue-cli构建项目得到的文件分析以及优化

参考文章： https://segmentfault.com/q/1010000008832754原文：http://www.cnblogs.com/zhuzhenwei918/p/6943147.html

vue插件开发之-vue.use()的源码分析。【代码】【图】

vue是一个渐进式框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。今天我们来看下vue是如何支持框架的。也就是vue.use这部分的实现。下面我们以vue-router为例来进行说明，import VueRouter from ‘vue-router‘ Vue.use(VueRouter)这段代码大家用过vue-router插件的应该很熟悉了。vue-router就是vue的一个插件了。然后我们首先来看下vue.use的源码实现。首先，我们看下vue.use()的入参要求。1，含有i...

关于vue-router，路由重定向的使用分析【图】

看之前的项目，突然发现一个不算bugd的bug，之前也是一直没有想到，现在发现之后越来越觉得有必要改掉，如图，项目用的是vue做的，自然切换用的就是路由，一级路由包括：首页、记录和个人中心，二级路由是在记录下面的三个报修记录，如上图路由分配，一级路由重定向到index，二级重定向至repair，一直觉得这样没什么问题，结果有次突然点到第三方租赁页，然后又点到个人中心，这是呢，我又想看看刚刚租赁页的信息，这时，由于路由重...

vue+drf 电商生鲜项目分析【代码】

一。项目的初始化　　用虚拟环境安装github上项目的开发环境二。settings.py:# 数据库的设置都是固定的 DATABASES = {‘default‘: {‘ENGINE‘: ‘django.db.backends.mysql‘,‘NAME‘:‘mxshop‘, # 要连接的数据库，连接前需要创建好‘USER‘:‘user‘,# 连接数据库的用户名‘PASSWORD‘:‘passw‘,# 连接数据库的密码‘HOST‘:‘192.168.1.1‘, # 连接主机，默认本级‘PORT‘:3306, # 端口默认3306"OPTIONS":{"init_comman...

Vue 目录结构分析数据绑定绑定属性循环渲染数据数据渲染

一、目录结构分析node_modules　　项目所需要的各种依赖src　　开发用的资源assets　　静态资源文件App.vue　　根组件main.js　　配置路由时会用.babelrc　　配置文件.editorconfig　　编辑器的配置文件.gitignore　　忽略的配置文件index.html　　html入口文件，一般写移动端在这里添加package.json　　项目配置文件，管理名称描述作者版本号之类的readme.md　　项目的说明文件webpack.config.js　　webpack的配置文件将.vue的文...

vue单页缓存方案分析及实现【图】

实现全站的页面缓存，前进刷新，返回走缓存，并且能记住上一页的滚动位置，参考了很多技术实现，github上的导航组件实现的原理要么使用的keep-alive，要么参考了keep-alive的源码，但是只用keep-alive没法实现相同path，不同参数展示不同view，这就有点坑了，所以需要结合自己要实现的功能，适当改造keep-alive，为了实现每次前进都能刷新，返回走缓存还能自动定位的功能，文章陆续从以下几个方面展开讲：两套技术方案可选，最后定...

基于vue通用表单解决方案的思考与分析【图】

前言 “那要怎么改？”，“那得改到什么时候？”，“什么时候才能支持这些功能？”。再一次听到了这样的话，我沉默了。到底要怎样改，这也是我所思考的，最近一直忙于其他，已经有一段时间没有处理 issue 了，趁着调休，我也要好好思考下。半年前，接触了 el-form-renderer ，瞬间感觉减轻了大部分表单编写的工作，一个简单的JSON配置，立刻展现出一个功能完好的表单页面。然而，随着使用的频率增加，却慢慢开始暴露各种不足，该...

Vue 动态设置路由参数的案例分析

在vue中可以动态设置路由参数： 1.使用this.$router.go()，与js histroy.go() 用法一直,前进1，后退-1，当前页面:0 注意使用go时必须是已经有访问历史记录了案例： <template><div> <button @click="goht">后退<button> <br/><button @click="goqj">前进<button> <br/><button @click="gosx">刷新当前<button></div></template><script>export default {methods: {goht(){this.$router.go(-1);},goqj(){this.$router.go(1);},g...

vue-cli webpack配置文件分析

相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。说明此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以...

Vue自定义指令及指令定义函数的具体分析（代码）

Vue自定义指令可以在全局或局部定义，Vue组件是html和代码的复用，而Vue指令是对DOM的扩展复用；下面我们就来具体看看对Vue中自定义指令的分析。1、Vue自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。2、Vue 钩子函数：指令定义函数提供了几个钩子函数（可选）：bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始...

vue嵌套路由与404重定向实现方法分析_vue.js【图】

这次给大家带来怎样使用vue嵌套路由，使用vue嵌套路由的注意事项有哪些，下面就是实战案例，一起来看一下。第一部分： vue嵌套路由嵌套路由是什么？嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。比如在vue中，我们如果不使用嵌套路由，那么只有一个<router-view>，但是如果使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。为什么要使用嵌套路由？就比如在一个页面中， ...

vue.js计算属性computed用法实例分析【图】

本文实例讲述了vue.js计算属性computed用法。分享给大家供大家参考，具体如下：需求：数据msg值为12345，我们现在需要反向显示成54321。在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div ...

Vue源码中钩子函数的学习分析【图】

本篇文章分享给大家的内容是关于Vue源码中钩子函数的学习分析，内容很详细，接下来我们就来看看具体的内容，希望可以帮助到大家。Vue实例在不同的生命周期阶段，都调用了callHook方法。比如在实例初始化（_init）的时候调用callHook(vm, beforeCreate)和callHook(vm, created)。这里的"beforeCreate","created"状态并非随意定义，而是来自于Vue内部的定义的生命周期钩子。var LIFECYCLE_HOOKS = [beforeCreate,created,beforeMount...

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 条件语句 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / Vue中v-model指令的分析（附代码）

Vue中v-model指令的分析（附代码）

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue中v-model指令的分析（附代码）】教程文章相关的互联网学习教程文章

vue-cli项目结构分析【图】

Vue.js 源码学习笔记 -- 分析前准备待续【代码】

vue-cli构建项目得到的文件分析以及优化

vue插件开发之-vue.use()的源码分析。【代码】【图】

关于vue-router，路由重定向的使用分析【图】

vue+drf 电商生鲜项目分析【代码】

Vue 目录结构分析数据绑定绑定属性循环渲染数据数据渲染

vue单页缓存方案分析及实现【图】

基于vue通用表单解决方案的思考与分析【图】

Vue 动态设置路由参数的案例分析

vue-cli webpack配置文件分析

Vue自定义指令及指令定义函数的具体分析（代码）

vue嵌套路由与404重定向实现方法分析_vue.js【图】

vue.js计算属性computed用法实例分析【图】

Vue源码中钩子函数的学习分析【图】

VUE - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程