v-model获取和设置表单元素的值

获取和设置表单元素的值，双向数据绑定

原理：语法糖，包含两个操作v-bind和v-on

  <input type="text" v-model="message">
  {{message}}</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {message: '你好啊'}}  //message任一一个改变，其余均会变

• 结合radio选择性别

  <div id="app">
    <label for="male">
      <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>您选择的性别是: {{sex}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {sex: '女'}})

• 结合checkbox

  • 单选框

  <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <button :disabled="!isAgree">下一步</button>
  data: {isAgree: false, // 单选框

  • 多选框(值绑定)

    <label v-for="item in originHobbies" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
      </label>
    hobbies: [], // 多选框,
    originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']

• 结合select

  • 单选框 /多选框

        

     <select name="abc" v-model="fruit(s)" multiple>  //加multiple规定可选择多个选项，不加为单选
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
      </select>
      <h2>您选择的水果是: {{fruit}}</h2>  //随选择相应变化
    const app = new Vue({
        el: '#app',
        data: { fruit: '香蕉',  //默认香蕉
                fruits: []  //多选选择放数组中

• 修饰符

  • lazy修饰符可以让数据在失去焦点或回车时更新数据

    <input type="text" v-model.lazy="message">
      <h2>{{message}}</h2>  //取消同步更新

  • number修饰符将传入的数据转为number类型

    <input type="number" v-model.number="age">
      <h2>{{age}}-{{typeof age}}</h2> //number

  • trim修饰符移除字符串左右空格

      <input type="text" v-model.trim="name">
      <h2>您输入的名字:{{name}}</h2>    //传入的name数据自动删除空格