vue2.0表单事件的绑定

 v-model

1.input type="text"

<template>
  <div id="app">
    <label for="myTxt">input-text:
      <input id="myTxt" type="text" v-model="myValue">myValue:{{myValue}}
    </label>
  </div>
</template>

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

• 修饰符：

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为数字
  • .trim - 输入首尾空格过滤

.lazy

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

<template>
  <div id="app">
    没有lazy修饰符：<input id="myTxt" type="text" v-model="myValue1">
    myValue1:{{myValue1}}<br>
    有lazy修饰符：<input id="myTxt" type="text" v-model.lazy="myValue2">myValue2:{{myValue2}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      myValue1: '我没有lazy修饰符',
      myValue2: '我有lazy修饰符'
    }
  }
}

</script>

页面效果：

.number

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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

<template>
  <div id="app">
    没有number修饰符：<input id="myTxt" type="text" v-model="myValue1">
    {{typeof myValue1}}<br>
    有number修饰符：<input id="myTxt" type="text" v-model.number="myValue2">{{typeof myValue2}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      myValue1: '111111',
      myValue2: '111111'
    }
  }
}

</script>

页面效果：

.trim

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

<template>
  <div id="app">
    没有trim修饰符：<input id="myTxt" type="text" v-model="myValue1">
    myValue1:{{myValue1}}<br>
    有trim修饰符：<input id="myTxt" type="text" v-model.trim="myValue2">myValue2:{{myValue2}}
  </div>
</template>

页面效果：

2.input type="checkbox"

<template>
  <div id="app">
    input-checkbox:
    <template v-for="items in myData">
      <input type="checkbox" v-model="myBox" :value="items.id">{{items.val}}
    </template>
    myBox:{{myBox}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      myData: [{
        id: 1,
        val: '苹果'
      }, {
        id: 2,
        val: '橘子'
      }, {
        id: 3,
        val: '香蕉'
      }],
      myBox: [],
    }
  }
}

</script>

3.input type="radio"

<template>
  <div id="app">
    input-radio:
    <template v-for="items in myData">
      <input type="radio" v-model="myRadio" :value="items.id">{{items.val}}
    </template>
    myRadio:{{myRadio}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      myData: [{
        id: 1,
        val: '苹果'
      }, {
        id: 2,
        val: '橘子'
      }, {
        id: 3,
        val: '香蕉'
      }],
      myRadio:null,
    }
  }
}

</script>

4.select

<template>
  <div id="app">
    <select v-model="mySelect">
      <option value="0">请选择</option>
      <template v-for="items in myData">
        <option :value="items.id">{{items.val}}</option>
      </template>
    </select>
    mySelect:{{mySelect}} 
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      myData: [{
        id: 1,
        val: '苹果'
      }, {
        id: 2,
        val: '橘子'
      }, {
        id: 3,
        val: '香蕉'
      }],
      mySelect:0
    }
  }
}

</script>