Vue 中v-model的完整用法及原理

目录
  • 一、 v-model的基本使用
  • 二、 v-model的原理
  • 三、 v-model结合radio类型使用
  • 四、 v-model结合复选框类型使用
  • 五、 v-model结合select
  • 六、 v-model的修饰符的使用

一、 v-model的基本使用

v-model双向绑定，既输入框的value改变，对应的message对象值也会改变，修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="message">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello"
    }
  })
</script>
</body>
</html>

二、 v-model的原理

先来一个demo实现不使用v-model实现双向绑定。

实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。获取事件对象，target获取监听的对象dom，value获取最新的值。v-model = v-bind + v-on$event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- $event获取事件对象，$event.target.value获取input值 -->
<!--  <input type="text" :value="message" @input="changeValue($event.target.value)">{{message}}-->
  <!--事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去-->
  <input type="text" :value="message" @input="changeValue">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello world"
    },
    methods: {
      changeValue(event){
        console.log("值改变了");
        this.message = event.target.value
      }
    }
  })
</script>
</body>
</html>

三、 v-model结合radio类型使用

radio单选框的属性是互斥的，如果使用v-model，可以不使用name就可以互斥。

v-model绑定`sex`属性，初始值为“男”，选择女后`sex`属性变成“女”，因为此时是双向绑定。

  <div id="app">
    <!-- name属性radio互斥 使用v-model可以不用name就可以互斥 -->
    <label for="male">
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <div>你选择的性别是：{{sex}}</div>

  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        sex:"男"
      },

    })
  </script>

四、 v-model结合复选框类型使用

checkbox可以结合v-model做单选框，也可以多选框。

checkbox结合v-model实现单选框，定义变量初始化为，点击checkbox的值为，也是。isAgree false true isAgree true

checkbox结合v-model实现多选框，定义数组对象，用于存放爱好，将与checkbox对象双向绑定，此时选中，一个多选框，就多一个true，就添加一个对象。hobbies hobbies hhobbies

单选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--单选框-->
  <h2>单选框</h2>
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h3>您的选选择是：{{isAgree}}</h3>
  <button :disabled="!isAgree">下一步</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: true

    }
  })
</script>
</body>
</html>

多选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--多选框-->
  <h2>多选框</h2>

    <input type="checkbox" name="hobby" value="篮球"  v-model="hobbies">篮球
    <input type="checkbox" name="hobby" value="足球"  v-model="hobbies">足球
    <input type="checkbox" name="hobby" value="羽毛球"  v-model="hobbies">羽毛球
    <input type="checkbox" name="hobby" value="乒乓球"  v-model="hobbies">乒乓球
  <h2>你的爱好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: []

    }
  })
</script>
</body>
</html>

值的绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--多选框-->
  <h2>多选框</h2>
  <label :for="item" v-for="(item,index) in hhobbies" :key="index">
    <input type="checkbox" name="hobby" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
  <h2>你的爱好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: [],
      hhobbies: ["篮球","足球","乒乓球","羽毛球"]

    }
  })
</script>
</body>
</html>

五、 v-model结合select

v-model结合select可以单选也可以多选。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model结合select类型</title>
</head>
<body>
  <div id="app">
    <!-- select单选 -->
    <select name="fruit" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
    </select>
    <h2>你选择的水果是：{{fruit}}</h2>

    <!-- select多选 -->
    <select name="fruits" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
    </select>
    <h2>你选择的水果是：{{fruits}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        fruit:"苹果",
        fruits:[]
      },
    })
  </script>
</body>

六、 v-model的修饰符的使用

lazy：默认情况下是实时更新数据，加上，从输入框失去焦点，按下enter都会更新数据

number：默认是字符串类型，使用复制为数字类型

trim：用于自动过滤用户输入的首尾空白字符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model修饰符</title>
</head>
<body>
  <div id="app">
    <h2>v-model修饰符</h2>
    <h3>lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据</h3>
    <input type="text" v-model.lazy="message">
    <div>{{message}}</div>
    <h3>修饰符number,默认是string类型，使用number赋值为number类型</h3>
    <input type="number" v-model.number="age">
    <div>{{age}}--{{typeof age}}</div>
    <h3>修饰符trim:去空格</h3>
    <input type="text" v-model.trim="name">

  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        age:18,
        name:"ttt"
      },

    })
  </script>
</body>
</html>

到此这篇关于Vue 中v-model的完整用法及原理的文章就介绍到这了,更多相关Vue v-model用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中v-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循环中多个input绑定指定v-model实例

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在element-table中生成的输入框 在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2.. 类似这样的,这样就可以通过绑定的值取到对应输入框

  • 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详解

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

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

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

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

  • vue 表单之通过v-model绑定单选按钮radio

    vue 表单之通过v-model绑定单选按钮radio

    用v-model绑定单选框能带来很多便捷的开发体验. 基础用法 <template> <div id="app"> <input type="radio" id="male" value="Male" v-model="gender"> Male <input type="radio" id="female" value=&q

  • vue 2.0组件与v-model详解

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

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

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

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

  • vue2 v-model/v-text 中使用过滤器的方法示例

    Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 v-bind 中 --> <div v-bind:id="rawId | formatId"></div> 可以在一

  • vue中的.sync修饰符用法及原理分析

    目录 .sync修饰符用法及原理 例如 .sync修饰符的用法总结 需求描述 解决方案 .sync修饰符用法及原理 vue中我们经常会用v-bind(缩写为:)给子组件传入参数. 或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态. 例如 //父组件给子组件传入一个函数  <MyFooter :age="age" @setAge="(res)=> age = res">  </MyFooter>  //子组件通过

  • Vue 中v-model的完整用法及原理

    目录 一. v-model的基本使用 二. v-model的原理 三. v-model结合radio类型使用 四. v-model结合复选框类型使用 五. v-model结合select 六. v-model的修饰符的使用 一. v-model的基本使用 v-model双向绑定,既输入框的value改变,对应的message对象值也会改变,修改message的值,input的value也会随之改变.无论改变那个值,另外一个值都会变化. <!DOCTYPE html> <html lang

  • 详解Vue中Computed与watch的用法与区别

    目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

  • Vue中的常用指令及用法总结

    首先来聊聊Vue框架,Vue是一套用于构建用户界面的渐进式的JavaScript框架,对于初学者来说是非常友好的 , Vue的虚拟Dom , 数据双向绑定 , 都使开发者可以快速上手 , 而我个人感觉 , Vue的指令使用起来非常的方便 , 今天的这篇文章们就来聊聊常用的Vue指令吧! v-for 在初学任何一门语言的时候我们或多或少都接触过 for for (let i = 0; i < arr.length; i++) { } Vue 的 v-for跟我们js里面的最根本的概念还是一样的就是

  • vue中v-model和响应式的实现原理解析

    vue中v-model和响应式的实现原理解析

    目录 v-model 响应式实现 v-model 首先要了解v-model就是vue帮我们封装的语法糖,真正实现靠的还是: v-bind:绑定响应式数据 触发 input 事件 并传递数据 例如下面示例: <template> // 这两种写法等价 <input v-bind:name="name" v-on:input="name=$event.target.value"/> <input v-model="name&quo

  • Vue中的基础过渡动画及实现原理解析

    前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层  <transition>标签

  • vue中的addEventListener和removeEventListener用法说明

    vue中的addEventListener和removeEventListener用法说明

    目录 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 2.移出监听事件(removeEventListener) 使用addEventListener添加事件.removeEventListener移除事件 添加事件 移除事件 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 语法:element.addEventListe

  • 详解vue中$nextTick和$forceUpdate的用法

    详解vue中$nextTick和$forceUpdate的用法

    1.$nextTick vm.$nextTick( [callback] ) this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上. 应用场景: 1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中. 2. 因为在created()钩子函数执行的时候DOM 其实并未

  • vue中关于click.stop的用法

    目录 关于click.stop的用法 @click.stop与@click.prevent 一.@click.stop 二.@click.prevent 关于click.stop的用法 click.stop 阻止点击事件继续传播 场景: 在table中使用,点击当前行,当前行被勾选,但是点击当前行中按钮或点击事件时,使用此方法,则在触发当前点击事件后,阻止行的选中事件 使用: html <el-table ref="tableRef" :data="tableData&

  • Vue中侦听器的基本用法示例

    目录 前言 一.侦听器的基本用法 二.侦听器的格式 三.实现刚进入页面就触发监听和深度监听 深度监听 深度监听返回侦听对象子属性的值 最后 前言 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 一.侦听器的基本用法 <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { fir

随机推荐