Vue3-TypeScript-事件-计算属性用法

1. 前言

1.书接上文vue3-ts核心语法
2.这个主要是 事件写法 和 计算属性的用法

---

2. 需求

1.类似一个 toDoList
2.根据输入的内容来动态列表显示
3.添加成功总数 通过计算属性来得到 数组总数

1.gif

---

3. 模板

1.首先为了更多的练习,这里我就不使用v-model了

函数
    

    

---

4. 事件

1.事件在TS里面也是直接写的,
2.和属性的区别就在于有没有()了

---

4.1 事件写法

直接在组件里面写

 addCharacter(e: Event) {}

---

4.2 直接写Event的问题

1.首先代码提示不够精准
2.例如 e.altKey e.keyCode 都没有提示

1.png

---

4.3 KeyboardEvent

1.因我们是输入框,所以我们很清楚是 键盘事件
2.写的越详细代码提示越详细,写起来越轻松
3.而且如果写错了立刻会有提示,不必等到运行再去测试

---

4.4 target

e.target

1.png

4.4.1 报错分析

1.这个target属于联合类型,
2.有可能为空
3.所有你不能对一个 possibly null/可能为空的对象进访问属性操作
4.null嘛 对象就没有属性了

---

4.4.2 解决 数据断言 as

    const inputE = e.target as HTMLInputElement;

数据断言 用户确定这个变量的类型 可以使用断言,告诉编译器 不用操心了,我知道啥类型

---

4.5 完整代码

addCharacter(e: KeyboardEvent) {
    const inputE = e.target as HTMLInputElement;
    const character: SelectCharacter = {
      id: this.characters.length + 1,
      name: inputE.value,
      selected: false,
    };
    this.characters.push(character);
    inputE.value = "";
  }

---

4.6 分析

1.其实这里面的SelectCharacter类型写不写都行.因为已经进行赋值了嘛
2.这里为了省事 直接把这个数组的长度+1作为id了,因为id最好不要从0开始,所以+1了
3.输入框的值赋值给name属性
4.添加到数组
5.清空输入框,形成闭环

---

5. 计算属性

直接写get 后面跟 名字
名字其实就是属性名
return

  // ************* 存取器计算属性的实现
  // 也是有缓存的
  get count() {
    return this.characters.length;
  }

---

使用计算属性

  
特性总数 {{ count }}

---

参考资料

1.TS语法-03
2.TS语法-04

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉