uniapp学习（003-2 vue3学习 Part.2）

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第15p-第p20的内容

---

事件监听以及组件内置事件处理

我们可以用@代替v-on:

各种事件

自定义模板快速创建uniapp

我们先创建一个vue demo模块

这里点击自定义模块

会打开一个目录 在这个目录里加上一个vue文件即可

这里就可以看到了

条件渲染 v-if和v-else

例子

v-else-if

三个等号不仅仅包括值相等，类型也要一样，两个等号会进行隐式转换

v-show

v-if和v-show的区别

v-if=false时 dom元素在页面里直接消失了
v-show=false时 dom元素的display=none； 隐藏了
v-if 加载省 v-show 切换省

v-show和v-if的图片资源加载情况

都是true时

都是false时

template和view使用v-if的区别

view包裹住的模块 级别会降一级

template 只是个虚拟的dom，它包裹的dom元素级别没变
这里的image的级别还是跟box1、box2是同级别的

v-for

例子


例子2

小程序测试 切换页面

添加编译模式

切换页面

这里没写唯一key报错

加上唯一标识即可

key最好不要用index 可能会有错误

用template不会破坏结构

组合使用 一般不建议这么用 执行顺序 v-if大于v-for

for为什么必须有key 例子

实际例子

如果key是index的话 删除某个值后 如果复选框会跟着变到别的地方

表单focus和blur事件

事件方法

@confirm代表pc端的回车 和手机端的键盘右下角的确定按钮

获取焦点和离开焦点

得到焦点的时候出现一只鸡，失去焦点时，鸡也不见了

编写代码

因为js代码就1行，也可以这么写

---

原文地址：https://blog.csdn.net/wang_book/article/details/142657067

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！