1. 前言
1.书接上文vue3-ts核心语法
2.这个主要是 事件写法 和 计算属性的用法
2. 需求
1.类似一个 toDoList
2.根据输入的内容来动态列表显示
3.添加成功总数 通过计算属性来得到 数组总数
3. 模板
1.首先为了更多的练习,这里我就不使用
v-model
了
<h1>函数</h1> <p><input type="text" @keydown.enter="addCharacter" /></p> <hr />
4. 事件
1.事件在TS里面也是直接写的,
2.和属性的区别就在于有没有()了
4.1 事件写法
直接在组件里面写
addCharacter(e: Event) {}
4.2 直接写Event的问题
1.首先代码提示不够精准
2.例如 e.altKey e.keyCode 都没有提示
4.3 KeyboardEvent
1.因我们是输入框,所以我们很清楚是 键盘事件
2.写的越详细代码提示越详细,写起来越轻松
3.而且如果写错了立刻会有提示,不必等到运行再去测试
4.4 target
e.target
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; }
使用计算属性
<h1>特性总数 {{ count }}</h1>