表单输入绑定【九】

表单输入绑定

基础用法

• 文本
• 多行文本
• 复选框
• 单选按钮
• 选择框

<div id="app">
      <form action="#">
        <!-- 文本 -->
        <input type="text" placeholder="文本" v-model="text" />
        <span>text : {{text}}</span><br />
        <hr />
        <!-- 多行文本 -->
        <textarea
          placeholder="多行文本"
          cols="30"
          rows="10"
          v-model="textarea"
        ></textarea>
        <span>textarea : {{textarea}}</span><br />
        <hr />
        <!-- 单个复选框:绑定到布尔值 -->
        <input type="checkbox" value="复选框" v-model="checkbox" />
        <span>单个复选框</span><br />
        <span>checkbox : {{checkbox}}</span><br />
        <hr />
        <!-- 多个复选框：绑定到数组 -->
        <div v-for="(item, index) in hobbys" :key="index">
          <input
            type="checkbox"
            name="hobby"
            v-model="checkboxs"
            :value="item"
          />
          <span>{{item}}</span>
        </div>
        <p>checkboxs : {{checkboxs}}</p>
        <br />
        <hr />
        <!-- 单选按钮 -->
        <input type="radio" value="单选按钮" v-model="radio" /><span>1</span>
        <input type="radio" value="单选按钮2" v-model="radio" /><span>2</span>
        <span>radio : {{radio}}</span><br />
        <hr />
        <!-- 选择框 -->
        <select v-model="option">
          <p>选择框</p>
          <option
            v-for="(item, index) in select"
            :key="index"
            :value="item.value"
          >
            {{item.message}}
          </option>
        </select>
        <span>select : {{option}}</span>
      </form>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {
            text: '',
            textarea: '',
            checkbox: '',
            checkboxs: [],
            radio: '',
            select: [
              { message: 'one', value: 'A' },
              { message: 'two', value: 'B' },
              { message: 'three', value: 'C' }
            ],
            hobbys: ['python', 'java', 'vue'],
            option: ''
          }
        }
      })
    </script>

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)，但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。

简单来说，就是通过v-bind将v-model绑定的值，绑定到vue中另一个动态的data值上。

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">