第七节:表单数据的双向绑定

• 使用元素 input textarea select checkbox radio
  • v-model在input框是 input方法 和 value属性的一个语法糖

<template>
  <div class="home">
    <p>{{ inputText }}</p>
    <input type="text" v-model="inputText" />
    <input type="text" @input="setInputText" :value="inputText"/>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    setInputText(e) {
      this.inputText = e.target.value;
    }
  }
}
</script>

• select
  • value属性 和 change事件的语法糖

<template>
  <div class="home">
    <div>
      <!-- 如果未能匹配对应的value，空项
        IOS中无法触发change事件,用户就没有办法选择第一项
        <option value="" disabled>请选择</option>来处理
       -->
      <select v-model="selectValue">
        <option value="" disabled>请选择</option>
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
      </select>
      <select @change="selectValue" :value="selectValue">
        <option value="" disabled>请选择</option>
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
      </select>
      <p>{{ selectValue }}</p>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      selectValue: 'apple'
    }
  },
  methods: {
    selectValue(e) {
      this.selectValue = e.target.value;
    }
  }
}
</script>

• checkbox
  • checked属性 和 change事件的语法糖

<template>
  <div class="home">
    <div>
      <p>{{ checkedValue }}</p>
      <input type="checkbox" v-model="checkedValue" />
      <input type="checkbox" :checked="checkedValue" @change="setChecked"/>
    </div>

    <div>
      <p>{{ selectedList }}</p>
      苹果: <input type="checkbox" value="apple" v-model="selectedList" />
      橘子: <input type="checkbox" value="orange" v-model="selectedList" />
      香蕉: <input type="checkbox" value="banana" v-model="selectedList" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      checkedValue: false,
      selectedList: []
    }
  },
  methods: {
    setChecked(e) {
      this.checkedValue = e.target.checked;
    }
  }

}
</script>

• radio

<template>
  <div class="home">
    <div>
      <p>{{ gender }}</p>
      男: <input type="radio" value="male" v-model="gender" />
      女: <input type="radio" value="female" v-model="gender" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      gender: 'female'
    }
  }
}
</script>

配合 v-model使用的常用修饰符

• lazy: 当input框失去焦点后，触发值得改变
• number: 值如果无法被parseFloat解析,就返回原始得值
• trim: 去掉输入框首尾的空格