Vue表单输入绑定的示例代码

<input v-model=\"message\" placehoder=\"edit me\">

<textarea v-model=\"message\"></textarea>

<input type=\"checkbox\" v-model=\"checked\">

<div id=\'example-3\'>
 <input type=\"checkbox\" id=\"jack\" value=\"Jack\" v-model=\"checkedNames\">
 <label for=\"jack\">Jack</label>
 <input type=\"checkbox\" id=\"john\" value=\"John\" v-model=\"checkedNames\">
 <label for=\"john\">John</label>
 <input type=\"checkbox\" id=\"mike\" value=\"Mike\" v-model=\"checkedNames\">
 <label for=\"mike\">Mike</label>
 <br>
 <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
 el: \'#example-3\',
 data: {
  checkedNames: []
 }
})

<div id=\"example-4\">
 <input type=\"radio\" id=\"one\" value=\"One\" v-model=\"picked\">
 <label for=\"one\">One</label>
 <br>
 <input type=\"radio\" id=\"two\" value=\"Two\" v-model=\"picked\">
 <label for=\"two\">Two</label>
 <br>
 <span>Picked: {{ picked }}</span>
</div>

new Vue({
 el: \'#example-4\',
 data: {
  picked: \'\'
 }
})

<div id=\"example-5\">
 <select v-model=\"selected\">
  <option disabled value=\"\">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>

new Vue({
 el: \'...\',
 data: {
  selected: \'\'
 }
})

<div id=\"example-6\">
 <select v-model=\"selected\" multiple style=\"width: 50px;\">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
</div>

new Vue({
 el: \'#example-6\',
 data: {
  selected: []
 }
})

<!-- 当选中时，`picked` 为字符串 \"a\" -->
<input type=\"radio\" v-model=\"picked\" value=\"a\">

<!-- `toggle` 为 true 或 false -->
<input type=\"checkbox\" v-model=\"toggle\">

<!-- 当选中第一个选项时，`selected` 为字符串 \"abc\" -->
<select v-model=\"selected\">
 <option value=\"abc\">ABC</option>
</select>

<input
 type=\"checkbox\"
 v-model=\"toggle\"
 true-value=\"yes\"
 false-value=\"no\"
>

<input type=\"radio\" v-model=\"pick\" v-bind:value=\"a\">
// 当选中时
vm.pick === vm.a

 // >>>>>>> html
  <div id=\"app\" >
    <!-- 输入框绑定 -->
    <input v-model=\'massage\' placeholder=\"输入信息\" >
    <p>massage is:{{ massage }}</p>
    <hr>
    <!-- 单个选框绑定，返回值为布尔值 -->
    <p>单个选框绑定，返回值为布尔值:</p>
    <input v-model=\'radioStatus\' type=\"checkbox\" name=\"isAgree\">
    <br>
    <label>数据:{{radioStatus}}</label>

    <hr>
    <!-- 多个选框绑定到同一个数据 -->
    <div>
      <p> 多个选框绑定同一个数据: </p>
      <input type=\"checkbox\" id=\"jack\" value=\"Jack\" v-model=\"checkedNames\">
      <label for=\"jack\">Jack</label>
      <input type=\"checkbox\" id=\"john\" value=\"John\" v-model=\"checkedNames\">
      <label for=\"john\">John</label>
      <input type=\"checkbox\" id=\"mike\" value=\"Mike\" v-model=\"checkedNames\">
      <label for=\"mike\">Mike</label>
      <br>
      <!-- checkedNames 为一个数组 [] -->
      <span>数据: {{ checkedNames }}</span>         
    </div>
    <hr>
    <div>
      <p>单选按钮数据:</p>
      <input type=\"radio\" id=\"one\" value=\"1\" v-model=\"sex\"><label for=\"one\">{{stantic.garder[1]}}</label>
      <input type=\"radio\" id=\"two\" value=\"2\" v-model=\"sex\"><label for=\"two\">{{ stantic.garder[2] }}</label>
      <input type=\"radio\" id=\"three\" value=\"3\" v-model=\"sex\"><label for=\"three\">{{ stantic.garder[3] }}</label>      
      <br>
      <!-- sex === 选中的input的value -->
      <span>性别代码: {{ sex }}；性别：{{stantic.garder[sex]}}</span>
    </div>
    <hr>
    <div>
      <p>选择列表:</p>
      <select v-model=\"selected\">
        <option disabled value=\"\">请选择</option>
        <option value=\"001\" >北京</option>
        <option value=\"003\" >天津</option>
        <option value=\"008\" >上海</option>
      </select>
      <span>Selected: {{ selected }}</span>    
    </div>
    <hr>
    <div>
      <h3>值绑定：</h3>
      <p>
        对于单选按钮，勾选框及选择列表选项，v-model 绑定的 value 通常是静态字符串 (对于勾选框是逻辑值)： 
        <br>
        但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

      </p>
      <!-- vm.toggle 和 vm.stantic.isOrNot 绑定 -->
      <label>是否毕业：</label>
      <input type=\"checkbox\" name=\"\" v-model=\'toggle\' v-bind:true-value=stantic.isOrNot[1] v-bind:false-value=stantic.isOrNot[0] >
      <!-- 选中时 vm.toggle === stantic.isOrNot[1] 未选中时 vm.toggle === stantic.isOrNot[0] -->
      <p>您选择了：{{toggle}}</p>
      
      <h4>选择列表的值绑定字面量对象:</h4> 
      <select v-model=\"selected2\">
        <!-- 内联对象字面量 -->
        <option v-bind:value=\"{ number: 123 }\">123</option>
        <option v-bind:value=\"{ number: 456 }\">456</option>
        <option v-bind:value=\"{ number: 789 }\">789</option>
      </select>
      <span>vm.selected={{selected2}}</span>
    </div>
    <hr>
    <div>
      <h3>修饰符</h3>
      
      <h4>.lazy</h4>
      <p>在默认情况下，v-model 在 <mark>input</mark> 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 <mark>change</mark> 事件中同步：</p>
      <input v-model.lazy=\'massage\' >
      <p>输入完成，信息改变：{{massage}}</p>
      
      <h4>.number</h4>
      <p>如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值)，可以添加一个修饰符 number 给 v-model 来处理输入值：</p>
      <!-- vm.age的值类型是Number -->
      <input type=\"number\" v-model.number=\'age\' >
      <span>类型为：{{ typeof age }}</span>

      <h4>.trim</h4>
      <p>如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：</p>
      <input v-model.trim=\'massage\' > 
    </div>
  </div>
 

 //    >>>>>>js

  // 基础用法 v-model
  let vm = new Vue({
    el:\'#app\',
    data:{
      massage:\'\',
      radioStatus:false,
      checkedNames:[],
      sex:\'\',
      age:\'\',
      toggle:\'\',
      selected:\'\',
      selected2:\'\',
      stantic:{
        garder:{
          1:\'男\',
          2:\'女\',
          3:\'不确定\'
        },
        Hobbies:{

          1:\'电影\',
          2:\'美食\',
          3:\'游戏\',
          4:\'科技\'
        },
        isOrNot:{
          1:\'是\',
          0:\'否\'
        }
      }
    }

  });