Vue.js学习笔记——9.v-model指令的使用

最新推荐文章于 2024-04-09 14:48:57 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量695

点赞数 2

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/DDDDDecade/article/details/110230262

版权

Vue.js学习笔记专栏收录该内容

17 篇文章 2 订阅

订阅专栏

一、v-model的基本使用

在用户信息的提交过程中，常常需要使用大量的表单，使用v-model指令就能实现表单元素与数据的双向绑定
语法：

<inpute v-model="message">

举例：

<!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:"你好啊"
    }
  })
</script>
</body>
</html>

执行结果：

可以看到message的值已经绑定到input表单里了，这跟mustache语法有点像，但是v-model是双向绑定的，即不单单message值绑定到input，而且input的值也绑定到message中。当我们改变input的值，message的值也会跟着改变。
在这里插入图片描述
v-model其实是一个语法糖，背后包含着两个操作：

v-bind绑定value属性
v-on绑定input事件

刚刚的代码等价于：

<div id="app">
<!--  <input type="text" v-model="message">-->
  <input type="text" :value="message" @input="changeInput">
<!--  或-->
  <input type="text" :value="message" @input="message = $event.target.value">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊"
    },
    methods:{
      changeInput(event){
        this.message = event.target.value;
      }
    }
  })
</script>

二、v-model与radio的使用

radio即单选框，在使用时为了保证每个单选框互斥要给每个radio绑定相同的name属性，希望默认选中的radio要添加checked属性。

<label for="male">
    <input type="radio" id="male" name="sex" value="男" checked>男
 </label>
 <label for="femal">
    <input type="radio" id="femal" name="sex" value="女">女
 </label>

在使用了v-model绑定value后这两个属性都可以略去

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <input type="radio" id="male" v-model="sex" value="男" >男
  </label>
  <label for="femal">
    <input type="radio" id="femal" v-model="sex" value="女">女
  </label>
  <h2>你选择的性别是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      sex:"男"
    }
  })
</script>
</body>
</html>

执行结果：
radio
因为同一组radio用v-model绑定的是同一个data数据，所以name属性可以略去。要想使radio默认选中，只需在v-modle绑定的属性sex处设定初始的value即可。选中不同的radio，绑定的sex的值也跟着改变，相反，改变sex的值，所选中的radio也会改变。

三、v-model与checkbox的使用

1.checkbox单选框

checkbox单选框在注册时或使用软件的一些同意协议比较常用，用v-model可以绑定一个布尔值来判断有没有选中，以此来判断能否进入下一步操作。此时的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>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      isAgree:false
    }
  })
</script>
</body>
</html>

执行结果：
checkbox单选
勾选前isAgree为false，button绑定的disabled为ture，按钮失效，勾选后isAgree为ture，反之按钮变为可用状态。初始状态是否勾选也是看绑定的isAgree的值是ture还是false。

2.checkbox复选框

v-model绑定复选框是要与一个数组绑定，方便存储选中的多个value
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="checkbox" value="唱" v-model="hobbies">唱
  <input type="checkbox" value="跳" v-model="hobbies">跳
  <input type="checkbox" value="rap" v-model="hobbies">rap
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <h2>你的爱好是：{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      hobbies:[]
    }
  })
</script>
</body>
</html>

执行结果：
checkbox多选框
勾选了哪个，绑定的数组就会添加哪个value，勾选的顺序不同，往数组添加的顺序也会不一样。需要设置默认勾选时，也是设置绑定的hobbies的值就行了。

四、v-model与select的使用

select也和checkbox一样，也分单选和多选两种情况，不过实际开发比较少用，所以直接看栗子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  select单选-->
  <select name="a" id="a" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="雪梨">雪梨</option>
    <option value="西瓜">西瓜</option>
  </select>
  <h2>你选择的水果是：{{fruit}}</h2>
<!--  select多选-->
  <select name="b" id="b" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <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>
</html>

执行结果：
select
单选时绑定一个值。多选时绑定一个数组，按住ctrl多选时会将对应value添加到数组中。设置默认选中也是设置绑定的值即可。

五、v-model的值绑定

实际开发中，我们input的value一般都不是写死的，都是从服务器取得有什么数据可以供用户选择的，这时就需要动态绑定value和id。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--  值绑定-->
  <h2>你的爱好是：{{hobbies}}</h2>
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      hobbies:[],
      originHobbies:['篮球','足球','乒乓球','羽毛球','地球']
    }
  })
</script>
</body>
</html>

执行结果：
值绑定

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

lazy修饰符
默认情况下。v-model默认时在input事件同步输入框数据的。即在输入框输入时，data中的数据就会频繁更新。lazy修饰符可以让数据在失去焦点或者用户敲击回车时才会更新。
语法：

<inpute v-model.lazy="message">

number修饰符
默认情况下，输入框中无论输入的是字母还是数字，都会被当作字符串类型处理。但如果我们希望处理的是数字类型，使用number修饰符可以让输入框中输入的内容转成数字类型。
语法：

<inpute v-model.number="message">

trim修饰符
trim修饰符用于剥除输入的字符串两边的空格
语法：

<inpute v-model.number="message">

土拨鼠的忧伤丶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js学习笔记——9.v-model指令的使用

目录一、v-model的基本使用二、v-model与radio的使用三、v-model与checkbox的使用1.checkbox单选框2.checkbox复选框四、v-model与select的使用五、v-model的值绑定六、v-model的修饰符的使用一、v-model的基本使用在用户信息的提交过程中，常常需要使用大量的表单，使用v-model指令就能实现表单元素与数据的双向绑定语法：<inpute v-model="message">举例：<!DOCTYPE html
复制链接

扫一扫