#Uniapp篇:变量&v-if 和 v-show 区别&.sync 修饰符&宽屏适配指南&Pinia内置了

let that = this

如果在某些methods中this被指向了其他内容,则需要提前把this赋值给另一个变量,比如let that = this。

复制代码
<script>
	export default {
		data() {
			return {
				connectedWifi:""
			}
		},
		methods: {
			buttonClick: function () {
				const that = this // 下面的this指向会变化,另存一下
				uni.startWifi({
					success: function() {
						uni.getConnectedWifi({
							success: function(res) {
								const { wifi } = res
								that.connectedWifi = JSON.stringify(wifi)
							},
							fail: function(res) {
							}
						})
					},
					fail: function(res) {
					}
				})
			},
		}
	}
</script>

v-if 和 v-show 区别

v-if 是"真正"的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换,来控制元素的显示和隐藏。

根据应用场景选择

v-if 有更高的切换开销,如果在运行时条件很少改变,则使用 v-if 较好。

v-show 有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好。
注意

不推荐同时使用 v-if 和 v-for。

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

###在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的 property。

第一个参数 value 是被迭代的对象元素的属性值。

第二个参数为 property 名称 (也就是键名)。

第三个参数作为索引。

复制代码
	<template>
		<view>
			<view v-for="(value, name, index) in object">
				 {{ index }}. {{ name }}: {{ value }}
			</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					object: {
						title: 'How to do lists in Vue',
						author: 'Jane Doe',
						publishedAt: '2020-04-10'
					}
				}
			}
		}
	</script>

.sync 修饰符

当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

复制代码
	<!-- 父组件 -->
	<template>
		<view>
			<syncA :title.sync="title"></syncA>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					title:"hello vue.js"
				}
			}
		}
	</script>

	<!-- 子组件 -->
	<template>
		<view>
			<view @click="changeTitle">{{title}}</view>
		</view>
	</template>
	<script>
		export default {
			props: {
				title: {
					default: "hello"
				},
			},
			methods:{
				changeTitle(){
					//触发一个更新事件
					this.$emit('update:title',"uni-app")
				}
			}
		}
	</script>

在 Vue 中,.sync修饰符是一种语法糖,用于父子组件之间的双向数据绑定。当子组件通过$emit('update:title', "uni-app")触发更新事件时,父组件会自动更新绑定的title数据。

在你的父组件中,不需要显式地接收回调,因为.sync修饰符已经自动处理了这个过程。当子组件触发更新事件时,父组件的title数据会自动更新为"uni-app"。

如果你想在父组件中观察这个变化,可以在父组件的watch选项中添加对title的观察:

复制代码
<template>
  <view>
    <syncA :title.sync="title"></syncA>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "hello vue.js",
    };
  },
  watch: {
    title(newValue) {
      console.log('Title updated:', newValue);
    },
  },
};
</script>

component 动态组件

https://v2.cn.vuejs.org/v2/api/#component

Pinia uniapp内置了

https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html

条件编译

https://uniapp.dcloud.net.cn/tutorial/platform.html

宽屏适配指南

https://uniapp.dcloud.net.cn/tutorial/adapt.html

相关推荐
2501_9159090612 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184113 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者815 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle17 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_9159214317 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q19632884751 天前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
阿金要当大魔王~~1 天前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
2501_915106321 天前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_916007471 天前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007472 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone