vue表单控件绑定（表单数据的自动收集）

v-model指令

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇

但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子

v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值

<template>
  <div id="app">
    <input v-model="message" placeholder="edit me" />
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

 

多行文本输入框

在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替

<template>
  <div id="app">
    <textarea v-model="message" placeholder="edit me" />
    <!--style="white-space: pre"可以解析换行-->
    <p style="white-space: pre">{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

复选框

单个勾选框，逻辑值

<template>
  <div id="app">
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{checked}}</label>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checked: false
    }
  }
}
</script>

多个勾选框，绑定到同一个数组

<template>
  <div id="app">
    <input type="checkbox" id="apple" value="apple" v-model="checkedName" />
    <label for="apple">apple</label>

    <input type="checkbox" id="orange" value="orange" v-model="checkedName" />
    <label for="orange">orange</label>

    <input type="checkbox" id="banana" value="banana" v-model="checkedName" />
    <label for="banana">banana</label>

    <p>{{checkedName}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checkedName: []
    }
  }
}
</script>

单选按钮

<template>
  <div id="app">
    <input type="radio" id="apple" value="apple" v-model="checkedName" />
    <label for="apple">apple</label>

    <input type="radio" id="orange" value="orange" v-model="checkedName" />
    <label for="orange">orange</label>

    <input type="radio" id="banana" value="banana" v-model="checkedName" />
    <label for="banana">banana</label>

    <p>{{checkedName}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checkedName: 'apple'
    }
  }
}
</script>

列表选择—单选列表/多选列表

<template>
  <div id="app">
    <select v-model="selected">
      <option>apple</option>
      <option>orange</option>
      <option>banana</option>
    </select>

    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selected: 'apple'
    }
  }
}
</script>

多选绑定到一个数组（需要按住Ctrl进行多选）

<template>
  <div id="app">
    <select v-model="selected" multiple>
      <option>apple</option>
      <option>orange</option>
      <option>banana</option>
    </select>

    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selected: []
    }
  }
}
</script>

动态选项，用 v-for 渲染

<template>
  <div id="app">
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">{{option.name}}</option>
    </select>

    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selected: 'a',
      options: [
        {name: 'apple', value: 'a'},
        {name: 'orange', value: 'o'},
        {name: 'banana', value: 'b'}
      ]
    }
  }
}
</script>

修饰符——lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 ，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

在输入框失去焦点或者电脑窗口改变后或者按enter时，数据会同步更新

<template>
  <div id="app">
    <input type="text" v-model.lazy="message" />
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

修饰符——number

如果想自动将用户的输入值(输入框输入的值都是字符串类型)转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number给 v-model 来处理输入值

<template>
  <div id="app">
    <input type="text" v-model.number="message" />
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

修饰符—— trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

<template>
  <div id="app">
    <input type="text" v-model.trim="message" />
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ''
    }
  }
}
</script>

修饰符—— prevent

阻止表单提交的默认事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_表单输入绑定</title>
</head>
<body>
<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>

    <span>密码: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>

    <span>爱好: </span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
    <label for="pingpang">乒乓</label><br>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介绍: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>
</body>
</html>