VUE-使用键盘码实现添加操作

功能简介：

1、键盘 enter 键码是13；

2、在输入name 后，鼠标抬起后，按enter键，实现添加功能

关键点：

1、找到键盘上enter 键对应的码值

2、定义全局的键值

3、绑定键值

<label for="name">
      name:
      <input type="text" v-model="name" name="name" @keyup.13="add()">
</label>

4、效果图如文章开头图片

5、全部源码

 
<template>
  <div class="root">
    <label for="id">
      id：
      <input type="text" v-model="id" name="id">
    </label>
    <label for="name">
      name:
      <input type="text" v-model="name" name="name" @keyup.13="add()">
    </label>
    <input type="button" value="添加" class="btn btn-primary" @click="add()">
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      name: "",
      list: [{ id: 1, name: "奔驰" }, { id: 2, name: "宝马" }]
    };
  },
  methods: {
    add() {
      // 添加的方法
      var car = { id: this.id, name: this.name };
      this.list.push(car);
      this.id = this.name = "";
    }
  }
};
</script>
<style lang="stylus" scoped>
.root {
  margin: 20px 100px;
}
</style>