uniapp中全局变量globalData以及class名的介绍和使用
使用uniapp开发时,可以通过在app.vue中定义全局变量,在没个页面内通过globalData获取
1、app.vue文件内部的写法
<script> export default { globalData: { text: 'text' }, onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script> <style> /*每个页面公共css */ </style>
2、在每个下级文件内的写法
onLoad() { var globalData = getApp().globalData.text; //获取全局变量 getApp().globalData.text = 'abc'; //修改全局变量 console.log(globalData); console.log(getApp().globalData.text); },
3、需要注意的是,如果需要在app.vue中获取这个全局变量,需要按以下写法
onLaunch: function() { console.log(this.$scope.globalData.text) console.log('App Launch') },
class名的配置及使用:
<!-- 与vue相同,isActive为true时class=active,反之无 --> <view :class="{ active: isActive }">111</view> <!-- 对应的value值为true时class为键值,反之无 --> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <!-- 数组内每一项的value值,对应为标签的class名 --> <view class="static" :class="[activeClass, errorClass]">333</view> <!-- 前面根据三目判断有无isActive这个class名,后面errorClass对应的value值为class名 --> <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <!-- 前面根据bool判断有无isActive这个class名,后面errorClass对应的value值为class名 --> <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!