v-model的使用

1.基本使用

v-model可以实现表单元素和数据的双向绑定
什么是双向绑定？
例如<input type=“text” v-model=“message”>
message的数据改变，input输入框中的数据会随之变化
input输入框中的数据变化了，message的数据也会改变

v-model其实是一个语法糖，它背后的本质是两个操作
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
<input type=“text” :value=“message” @input = “message = $event.target.value”>
和 <input type=“text” v-model=“message”>等价
代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" :value="message" @input="message=$event.target.value">
  <input type="text" v-model="message">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！'
    }
  })
</script>
</body>
</html>

2.v-model和radio属性结合

在input元素中
radio单选按钮属性
name 属性用于对提交到服务器后的表单数据进行标识
将name属性设置为不同的值，可对两个选择按钮进行同时选择
将name属性设置为相同的值，就能实现互斥选择

<!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" value="男" name="sex" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" name="sex" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>

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

在这里插入图片描述
在这里，因为有了v-model，两个input标签里的name属性去掉也可以实现互斥访问

3.v-model结合checkbox属性

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.checkbox单选框-->
  <label for="">
    <input type="checkbox" id="license" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button><br>
<!--  2.checkbox复选框-->
  <input type="checkbox" value="basketball" v-model="hobbies">篮球
  <input type="checkbox" value="badminton" v-model="hobbies">羽毛球
  <input type="checkbox" value="football" v-model="hobbies">足球
  <input type="checkbox" value="table tennis" v-model="hobbies">乒乓球
  <h2>您的爱好：{{hobbies}}</h2>
</div>

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

在这里插入图片描述 PS：input标签里的value不建议写死，可以动态绑定，修改如下

<label v-for="item in originalHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
  ...
  const app = new Vue({
    el:'#app',
    data:{
      isAgree: false,
      hobbies: [],
      originalHobbies: ['台球','排球','网球','篮球']
    }
  })

4.v-model结合select属性

代码示例
select添加一个mutiple属性就可以实现选择多个选项(选多个的时候要按Ctrl键)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--  1.select选择一个-->
  <select name="favorite" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="西瓜">西瓜</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您最喜欢的水果：{{fruit}}</h2>
  <!--  2.select选择多个-->
  <select name="favorite" 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>

在这里插入图片描述

5.修饰符

①lazy修饰符
v-model默认是在input事件中同步输入框的数据的，你只要改变输入框的数据，对于data中的数据就会立即跟着改变
lazy修饰符可以让数据在失去焦点或者回车时才会更新
②number修饰符
默认情况下，在输入框中无论输入字母还是数字，都会被当作字符串类型进行处理
但是如果我们希望处理的是数字类型，number修饰符可以让输入框中的内容自动转成数字类型
③trim修饰符
该修饰符可以过滤掉输入内容左右两侧的空格
代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.lazy修饰符-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
  <!--  2.number修饰符-->
  <input type="number" v-model.number="age"><br>
  <h2>{{age}}-{{typeof age}}</h2>
  <!--  1.trim修饰符-->
  <input type="text" v-model="name"><br>
  <h2>您的名字是：{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'aaa',
      age: 0,
      name: '',
    }
  })
</script>
</body>
</html>