欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-19 13:00:08
目录一、v-model的基本使用二、v-model与radio的使用三、v-model与checkbox的使用1.checkbox单选框2.checkbox复选框四、v-model与select的使用五、v-model的值绑定六、v-model的修饰符的使用一、v-model的基本使用在用户信息的提交过程中，常常需要使用大量的表单，使用v-model指令就能实现表单元素与数据的双向绑定语法：举例：

目录

一、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>

执行结果：
Vue.js学习笔记——9.v-model指令的使用
可以看到message的值已经绑定到input表单里了，这跟mustache语法有点像 ，但是v-model是双向绑定的，即不单单message值绑定到input，而且input的值也绑定到message中。当我们改变input的值，message的值也会跟着改变。
Vue.js学习笔记——9.v-model指令的使用
v-model其实是一个语法糖，背后包含着两个操作：

  1. v-bind绑定value属性
  2. 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>

执行结果：
Vue.js学习笔记——9.v-model指令的使用
因为同一组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>

执行结果：
Vue.js学习笔记——9.v-model指令的使用
勾选前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>

执行结果：
Vue.js学习笔记——9.v-model指令的使用
勾选了哪个，绑定的数组就会添加哪个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>

执行结果：
Vue.js学习笔记——9.v-model指令的使用
单选时绑定一个值。多选时绑定一个数组，按住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>

执行结果：
Vue.js学习笔记——9.v-model指令的使用

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

  1. lazy修饰符
    默认情况下。v-model默认 时在input事件同步输入框数据的。即在输入框输入时，data中的数据就会频繁更新。lazy修饰符可以让数据在失去焦点或者用户敲击回车时才会更新。
    语法：
<inpute v-model.lazy="message">
  1. number修饰符
    默认情况下，输入框中无论输入的是字母还是数字，都会被当作字符串类型处理。但如果我们希望处理的是数字类型，使用number修饰符可以让输入框中输入的内容转成数字类型。
    语法：
<inpute v-model.number="message">
  1. trim修饰符
    trim修饰符用于剥除输入的字符串两边的空格
    语法：
<inpute v-model.number="message">

本文地址：https://blog.csdn.net/DDDDDecade/article/details/110230262

相关标签： Vue.js学习笔记 vue.js

上一篇： js实现兄弟字符串算法

下一篇： CDN使用心得：加速双刃剑

推荐阅读