Vue学习：06-双向绑定

一、v-model

v-model双向数据绑定指令，视图数据和数据源同步。

一般情况下v-model指令用在表单元素中：

1. 文本类型的<input>和<textarea>元素会绑定value属性并侦听input事件

2. <input type="checkbox">和<input type="radio">会绑定checked属性并侦听change事件

3. <select>会绑定value属性并侦听change事件

App.vue

<script setup>
  
  import { ref } from 'vue';
  
  let inputText = ref('ABC')  //单行文本框
  let message = ref('本次更新有以下几点：......')  //多行文本框
  let open = ref(true)  //开灯（复选框）
  let determine = ref('不确定')  //是否确定（复选框）
  let likes = ref(['YMQ'])  //兴趣爱好（复选框）
  let sex = ref('woman')  //性别（单选按钮）
  let level = ref('B')  //证书等级（单选下拉框）
  let city = ref(['吉C','吉B'])  //去过的城市（多选下拉框） 

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 单行文本框 -->
  <input type="text" v-model="inputText">
  <h3>{{ inputText }}</h3>    
  <hr>
  <!-- 多行文本框 -->
  <textarea v-model="message"></textarea>
  <h3>{{ message }}</h3>
  <hr>
  <!-- 默认情况下，复选框的值为：true/false -->
  <input type="checkbox" v-model="open">灯
  <h3>open:{{ open }}</h3>
  <hr>
  <!-- 自定义复选框值：true-value/false-value -->
  <input type="checkbox" true-value="确定" false-value="不确定" v-model="determine">是否确定
  <h3>determine:{{ determine }}</h3>
  <hr>
  <!-- 用数组存放复选框的值 -->
  <input type="checkbox" value="LQ" v-model="likes">篮球
  <input type="checkbox" value="ZQ" v-model="likes">足球
  <input type="checkbox" value="YMQ" v-model="likes">羽毛球
  <input type="checkbox" value="PPQ" v-model="likes">乒乓球
  <h3>likes:{{ likes }}</h3>
  <hr>
  <!-- 单选按钮 -->
  <input type="radio" value="man" v-model="sex">男
  <input type="radio" value="woman" v-model="sex">女
  <h3>sex:{{ sex }}</h3>
  <hr>
  <!-- 单选下拉列表 -->
  证书等级：
  <select v-model="level">
    <option value="C">初级</option>
    <option value="B">中级</option>
    <option value="A">高级</option>
  </select>
  <h3>level: {{ level }}</h3>
  <hr>
  <!-- 用数组存放多选下拉列表的值 -->
  去过的城市：
  <select multiple v-model="city">
    <option value="苏A">南京</option>
    <option value="苏B">无锡</option>
    <option value="苏C">徐州</option>
    <option value="苏D">常州</option>
  </select>
  <h3>city:{{ city }}</h3>
</template>

二、v-model的修饰符

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number="age" />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim="msg" />
.lazy	在"change"时而非"input"时更新	<input v-model.lazy="msg" />

App.vue

<script setup>
  
  import { ref } from 'vue';
  
  let age = ref(20)
  let nickname = ref('')
  
</script>

<!-- 视图区域（view） -->
<template>
  <p>将用户输入的值转成数值.number，懒更新.lazy</p>
  <!-- .number将用户输入的值转成数值，如果该值无法被 parseFloat() 处理，那么将返回原始值。number 修饰符会在输入框有 type="number" 时自动启用。 -->
  <!-- .lazy在change更新数据源，而不是input -->
  <input type="text" v-model.lazy.number="age">
  <h3>age:{{ age }}</h3>
  <button @click="console.log(age)">点我</button>

  <hr>
  <p>去掉首位空白字符</p>
  <input type="text" v-model.trim="nickname">
  <h3>nickname:{{ nickname }}</h3>
  <button @click="console.log(nickname)">点我</button>
</template>