从“心”认识Vue（三）：再谈v-model

最新推荐文章于 2024-04-29 05:03:03 发布

maya1024

最新推荐文章于 2024-04-29 05:03:03 发布

阅读量288

点赞数

分类专栏： vue 文章标签： vue es6 vue.js html5

本文链接：https://blog.youkuaiyun.com/high32/article/details/112980137

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

从“心”认识Vue（三）：再谈v-model

前言
一、v-model的基本使用
- 1.v-model绑定text输入框
- 2.v-model绑定原理
二、v-model与radio
三、v-model与checkbox
- 1.单选框
- 2.多选框
四、v-model与select下拉菜单
- 1.单选时
- 2.多选时
五、v-model的值绑定
六、v-model的修饰符
总结

前言

开始学习vue了，但是编程的思想还是不容易转变过来，一两周过去了，只知道个大概，知其然而不知其所以然，打算开一个系列帖，重新认识下vue。

上篇文章：从“心”认识Vue（二）: 计算属性和methods方法的区别

一、v-model的基本使用

vue中使用v-model实现表单元素和数据的双向绑定。

1.v-model绑定text输入框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="msg">
  <h3>{{msg}}</h3>
</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: "haha"
    }
  })
</script>
</body>
</html>

2.v-model绑定原理

仔细看上面代码，看v-model都做了什么？

第一步，使用v-bind绑定了值；
第二步，使用了一个input事件实现值的同步输入

那么我们可以理解为这样：先用v-bind绑定value值，然后用通过v-on使用input事件,event.target.value为事件源的值

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

 <input type="text" :value="msg" @input="valChange">

  <h3>{{msg}}</h3>
</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: "haha"
    },
    methods:{
      valChange(event){
        this.msg = event.target.value
      }
    }
  })
</script>
</body>
</html>

进而，input可以写成这样，事件方法就不用写了：

<input type="text" :value="msg" @input="msg=$event.target.value">

也就是上面代码等同于下面代码：

<input type="text" v-model="msg">

二、v-model与radio

v-model直接与单选框value值进行绑定
定义了value值时，radio也会同时选中,基于双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <label for="male">
<!--      用v-model时name值不写时它们也是互斥的-->
      <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>你选择的是：{{sex}}</h2>
    </div>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          //sex默认是男，同时input也会被选中，基于双向绑定
          sex:"男"
        }
      })
    </script>
</body>
</html>

三、v-model与checkbox

1.单选框

v-model与checked是否选中绑定，绑定boolean值
此时value与v-model无关

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>你选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          isAgree:false,//单选框
        }
      })
    </script>
</body>
</html>

2.多选框

多选时，v-model绑定的是一个数组
当被选中时，value值就会加入数组中

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

<!--  2.多选-->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <h2>你选择的是：{{hobbies}}</h2>


    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          isAgree:false,//单选框
          hobbies:[],//多选框
        }
      })
    </script>
</body>
</html>

四、v-model与select下拉菜单

1.单选时

v-model绑定的是一个值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
<!--      1.选择一个-->
    <select name="fruit" id="" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="草莓">草莓</option>
    </select>
	<h2>你选择的是：{{fruit}}</h2>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          fruit:"香蕉"
        }
      })
    </script>
</body>
</html>

2.多选时

此时v-model绑定一个数组
按住shift或ctrl多选时,value值会加入到数组中

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

    <select name="fruit" id="" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="草莓">草莓</option>
    </select>
    <h2>你选择的是：{{fruits}}</h2>
    </div>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          fruits:[]
        }
      })
    </script>
</body>
</html>

五、v-model的值绑定

从data获取数据后，动态给value赋值

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

<!--    3.值绑定-->
    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>你选择的是：{{hobbies}}</h2>
  </div>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          originHobbies:['篮球','足球','羽毛球','乒乓球','台球']
        }
      })
    </script>
</body>
</html>

六、v-model的修饰符

1.lazy

默认情况下input输入框与v-model绑定值是同步输入的
lazy可以避免数据的频繁刷新，即只有失去焦点或者回车后数据才会进行更新

<input type="text" v-model.lazy="msg">
<h2>{{msg}}</h2>

2.number

默认情况下v-model总是把输入的变量自动转换为字符串
number可以让输入的内容转换为number类型

    <input type="number" v-model.number="age">
    <h2>{{age}}--{{typeof age}}</h2>

3.trim

trim修饰符可以过滤内容左右两边的空格

   <input type="text" v-model.trim="name">
   <h2>名字：{{name}}</h2>

不加trim时网页渲染时显示不出来空格，实际上是有空格，在控制台里可以查看，如果不想出现空格，就加上trim。

总结

1. v-model与input输入框绑定时双向绑定值；
1. 与radio单选框绑定时绑定是否选中布尔值；
1. 与checkbox多选框绑定时绑定值；
1. 与select下拉菜单绑定时绑定值；
1. v-model的值绑定是基于v-bind动态赋值value；
1. v-model有修饰符。