vue3学习3：按键修饰符，v-model

按键修饰符
在监听键盘事件时，可以为键盘相关的事件添加按键修饰符

<template>
  <div id="app">
    <input type="text" @keyup.enter="submit" @keyup.esc="clear" />
    <p>---------</p>

  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{

    }
  },
  methods:{
          submit(e) {
            alert('摁下了 enter 键，最新的值是：' + e.target.value)
          },
          clear(e) {
            e.target.value = ''
            alert('已经清空')
          },

  }
}
</script>

v-model 双向数据绑定指令
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

<template>
  <div id="app">
      <label for="a">
            <input type="radio" id="a" value="大号" v-model="x">大
      </label>
      <label for="b">
            <input type="radio" id="b" value="中号" v-model="x">中
      </label>
      <label for="c">
            <input type="radio" id="c" value="小号" v-model="x">小
      </label>
        <h3>请选择衣服大小：{{x}}</h3>
    <p>---------</p>

  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      x: '？'
    }
  },
  methods:{

  }
}
</script>

<template>
  <div id="app">
      <label for="a">
            <input type="checkbox" id="a" value="红楼梦" v-model="x">红楼梦
      </label>
      <label for="b">
            <input type="checkbox" id="b" value="西游记" v-model="x">西游记
      </label>
      <label for="c">
            <input type="checkbox" id="c" value="三国演义" v-model="x">三国演义
      </label>
      <label for="d">
            <input type="checkbox" id="d" value="水浒传" v-model="x">水浒传
      </label>
        <h3>请选择书籍：{{x}}</h3>
    <p>---------</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      x: []
    }
  },
  methods:{

  }
}
</script>

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符
v-model.number 自动将用户的输入值转为数值类型
v-model.trim 自动过滤用户输入的首尾空白字符
v-model.lazy 在“change”时而非“input”时更新