热梗案例:部分知识点综合

通过一个案例来巩固学过的指令,比如:差值表达式,ref响应状态,v-for,key,<input>,<button>,v-model,以及点击事件@click

使用差值表达式配合ref输出

<input>标签文本框输入,输入内容上传

<button>发送按钮,点击按钮提交

v-model:双向绑定,拿到值

@click:里面的函数可以加()把值传过来,也可以不加

通过v-for循环,key获取id,并且根据id删除,这样就不会出现明明删除了这一条,但是id却没删除

然后就是<buttton>标签使用禁用属性在没有填写值大于几位数时禁用

通过点击事件拿到索引,并按照索引删除

v-model的函数拿到值后,把函数的值发到数组里追加,用push属性 追加

还用到了一些css样式和html布局

并使用了v-model的函数value的空字符串方法来实现输入提交后自动清除内容

一下是css样式布局: