13-Vuejs核心知识之表单绑定

我们可以用 v-model 指令在表单 input 及 textarea 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

文本输入框

<!-- 你可以通过变量 message 取到输入到文本框中的值 -->
<input v-model="message">
<p> 你输入的内容: {{message}}</p>
多行文本框
<!-- 注意这里如果在文本区域插值 (<textarea></textarea>) 并不会生效 -->
<textarea v-model="message"></textarea>
<p> 你输入的内容：{{message}}</p>
单选框
<!-- 变量 sex 就是选中项的对应的 value 值 -->
<template>
<div id="radio">
  <input type="radio" id="male" value="男" v-model="sex">
  <label for="male"> 男 </label>
  <br>
  <input type="radio" id="female" value="女" v-model="sex">
  <label for="female"> 女 </label>
  <br>
  <span> 选择的性别：{{sex}}</span>
</div>
</template>
<script>
new Vue({
  el: '#radio',
  data: {sex: '男' // 使默认选中 '男'}
})
</script>

多选框

<template>
<div id='checkbox'>
  <input type="checkbox" id="apple" value="苹果" v-model="fruit">
  <label for="apple"> 苹果 </label>
  <input type="checkbox" id="orange" value="桔子" v-model="fruit">
  <label for="orange"> 桔子 </label>
  <input type="checkbox" id="banana" value="香蕉" v-model="fruit">
  <label for="banana"> 香蕉 </label>
  <br>
  <span> 选中喜欢的水果：{{fruit}}</span>
</div>
</template>
<script>
new Vue({
  el: '#checkbox',
  data: {fruit: ['香蕉'] // 使默认选中 '香蕉'
  }
})
</script>

下拉单选框

<!-- 变量 city 就是你下拉选择项的 value 值 -->
<template>
<div id="select">
  <select v-model="city">
    <option disabled value=""> 请选择 </option>
    <option> 北京 </option>
    <option> 上海 </option>
    <option> 广州 </option>
    <option> 深圳 </option>
    <option> 杭州 </option>
  </select>
  <span> 你选中的城市: {{city}}</span>
</div>
</template>
<script>
new Vue({
  el: '#select',
  data: {selected: ''// 使默认选择' 请选择 '}
})
</script>

下拉多选框

<!-- 下拉选项是动态渲染出来的，而且这里添加 multiple 表示下拉多选，那么 city 对应的值将会是数组的形式 -->
<template>
<div id="multiple-select">
  <select v-model="city" multiple>
    <option v-for="option in options" v-bind:value="option.value">
        {{option.text}}
    </option>
  </select>
  <span> 你选中的城市: {{city}}</span>
</div>
</template>
<script>
new Vue({
  el: '#multiple-select',
  data: {
    options: [{ text: '北京', value: '北京'},
      {text: '上海', value: '上海'},
      {text: '广州', value: '广州'},
      {text: '深圳', value: '深圳'},
      {text: '杭州', value: '杭州'}
    ],
    selected: []}
})
</script>

总结

这节我们学习了 HTML 中表单的单行文本框、多行文本框、单选框、多选框、下拉单选框、下拉多选框等元素在 vue.js 中的数据绑定，同时也学习了通过给绑定的变量赋值来控制表单元素的默认值，很简单吧。