零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等
总时长 23:40:00 共116P
此文章包含第15p-第p20的内容
文章目录
- 事件监听以及组件内置事件处理
- 自定义模板快速创建uniapp
- 条件渲染 v-if和v-else
- v-else-if
- v-show
- v-if和v-show的区别
- v-show和v-if的图片资源加载情况
- template和view使用v-if的区别
- v-for
- 小程序测试 切换页面
- 用template不会破坏结构
- for为什么必须有key 例子
- 表单focus和blur事件
- 获取焦点和离开焦点
事件监听以及组件内置事件处理
我们可以用@代替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行，也可以这么写
