本质

数据双向绑定是由 v-model=”数据来源” （data）来实现，其本质是语法糖

适用元素

  • input
  • textarea
  • select
  • checkbox
  • radio

使用 v-model 后会忽略 value check selected 这些属性

例子

  1. const App = {
  2.     template: `
  3.         <p>
  4.             <p>{{ inputText }}</p>
  5.             v-model: <input type="text" v-model="inputText" />
  6.             input+value: <input type="text" @input="setInputText" :value="inputText" />
  7.         </p>
  9.         <hr />
  11.         <p>
  12.             <p>{{ selectedValue }}</p>
  13.             <!--
  14.                 如果未能匹配到对应的 value 是空项，
  15.                 但 IOS 中无法触发 change 事件，用户就没有办法选择第一项，解决方法为增加一个禁用项
  16.             -->
  17.             v-model:
  18.             <select v-model="selectedValue">
  19.                 <option value="" disable>请选择</option>
  20.                 <option value="Russia">俄罗斯</option>
  21.                 <option value="China">中国</option>
  22.                 <option value="America">美国</option>
  23.             </select>
  24.             change+value:
  25.             <select @change="selectValue" :value="selectedValue">
  26.                 <option value="" disable>请选择</option>
  27.                 <option value="Russia">俄罗斯</option>
  28.                 <option value="China">中国</option>
  29.                 <option value="America">美国</option>
  30.             </select>
  31.         </p>
  33.         <hr />
  35.         <p>
  36.             <p>{{ cbChecked }}</p>
  37.             v-model: <input type="checkbox" v-model="cbChecked" />
  38.             change+value:    <input type="checkbox" :checked="cbChecked" @change="setChekcbox" />
  39.         </p>
  41.         <p>
  42.             <p>{{ selectedCountries }}</p>
  43.             俄罗斯: <input type="checkbox" value="Russia“ v-model="selectedCountries" />
  44.             中国: <input type="checkbox" value="China“ v-model="selectedCountries" />
  45.             美国: <input type="checkbox" value="America“ v-model="selectedCountries" />
  46.         </p>
  48.         <p>
  49.             <p>{{ gender }}</p>
  50.             男: <input type="raido" value="male“ v-model="gender" />
  51.             女: <input type="raido" value="female“ v-model="gender" />
  52.         </p>
  54.         <hr />
  56.         <p>
  57.             <p>{{ selectedValue }}</p>
  58.             <select v-model="selectedVal">
  59.                 <option value="" disabled>请选择!!!</option>
  60.            <options
  61.                     v-for="country of countries" 
  62.           :key="country.id" 
  63.                     :value="country.value">
  64.                     {{ country.info.name}}
  65.                 </option>
  66.             </select>
  67.         </p>
  69.         <hr />
  71.         <p>
  72.             <p>{{ Married }}</p>
  73.             婚否:
  74.             <input
  75.                 type=”checkbox“
  76.                 v-model="married"
  77.                 true-value="married"
  78.                 false-value="unmarried"
  79.             />
  80.         </p>
  82.         <hr />
  84.         <p>
  85.             <p>{{ isAgree }}</p>
  86.             <input
  87.                 type=”radio“
  88.                 v-model="isAgree" 
  89.                 :value="isAgreeValue"
  90.             />
  91.         </p>
  93.         <p>
  94.             <p>{{ selectedValue2 }}</p>
  95.             <select v-model="selectedValue2">
  96.                 <option value="" disable>请选择</option> 
  97.                 <option :value="{ name: '俄罗斯', continent: 'Euro'}">俄罗斯</option>
  98.                 <option :value="{ name: '中国', continent: 'Asia'}">中国</option>
  99.                 <option :value="{ name: '美国', continent: 'North America'}">美国</option>
  100.             </select>
  101.         </p>
  103.         <hr />
  104.         <p>
  105.             <p>{{ inputText }}</p>
  106.             <!-- input + value: 每次输入完成时，数据发生改变 -->
  107.             <input type="text" v-model="inputText" />
  108.             <!-- change + value: 推动焦点时，数据发生改变 -->
  109.             <input type="text" v-model.lazy="inputText" />
  110.         </p>
  112.         <hr />
  113.         <p>
  114.             <p>{{ typeof mynumber1 }}</p>
  115.             <p>{{ typeof mynumber2 }}</p>
  116.             <input type="number" v-model="myNumber1"/>
  117.             <!-- 值如果无法被 parseFlot 解析，就返回原始的值 -->
  118.             <input type="number" v-model.number="myNumber2"/>
  119.         </p>
  121.       <hr />
  122.         <p>
  123.             <p>{{ inputText }}</p>
  124.             <!-- input + value: 每次输入完成时，数据发生改变 -->
  125.             <input type="text" v-model="inputText" />
  126.             <!-- change + value: 推动焦点时，数据发生改变 -->
  127.             <input type="text" v-model.lazy="inputText" />
  128.         </p>
  130.         <hr />
  131.         <p>
  132.             <p>{{ myText1.length }}</p>
  133.             <p>{{ myText2.length }}</p>
  134.           <input v-model="myText1"/>
  135.             <input v-model.trime="myText2"/>
  136.         </p>
  137.     `,
  138.   data() {
  139.       return {
  140.         inputText: 'inputText',
  141.       selectedValue: 'China',
  142.       cbChecked: false,
  143.       selectedCountries: [],
  144.       gender: 'female',
  145.       countries: [
  146.         {id: 1, info: { name: '俄罗斯', continent: 'Euro'}, value: 'Russia'},
  147.         {id: 2, info: { name: '中国', continent: 'Asia'}, value: 'China'},
  148.         {id: 3, info: { name: '美国', continent: 'North America'}, value: 'America'}
  149.       ],
  150.       Married: 'unmarried',
  151.       isAgree: false,
  152.       isAgreeValue: '同意',
  153.       selectedValue2: '',
  154.       mynumber1: 1,
  155.       mynumber2: 2,
  156.       myText1: '',
  157.       myText2: ''
  158.     }
  159.   },
  160.   mehtods: {
  161.       setInputText(e) {
  162.         this.inputText = e.target.value;
  163.     },
  164.     selectValue(e) {
  165.         this.selectedValue = e.target.value;
  166.     },
  167.     setChekcbox(e) {
  168.         this.cbChekced = e.target.chekced;
  169.     }
  170.   }
  171. }
  173. Vue.createApp(App).mount('#app');

:::warning 如果未能匹配到对应的 value 是空项，但 IOS 中无法触发 change 事件，用户就没有办法选择第一项，解决方法为增加一个禁用项 :::

model 的修饰符

model.lazy 可以把事件由 input 改为 change
model.number 会类型转为 number
model.trim 会过滤掉首发的空白字符

对于输入法组织文字输出

v-model 是等到输出后才赋值，但如果用 ipnut + value 就不会