小程序和uni-app页面的绑定数据，切换样式

最新推荐文章于 2024-07-09 03:27:36 发布
最新推荐文章于 2024-07-09 03:27:36 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： 微信小程序开发记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010513497/article/details/103663012
版权

文章目录

数据绑定

微信小程序

微信小程序引用数据的时候是，在双引号里面使用双花括号，比如
在这里插入图片描述
在这里插入图片描述

uni-app中绑定数据

和小程序的相似
比如：
在这里插入图片描述
在这里插入图片描述

使用if的时候不需要花括号
在这里插入图片描述
在这里插入图片描述

样式绑定

小程序

可以查看：
博文一
博文二

在这里插入图片描述

uni-app

参考博文

在这里插入图片描述
注意这里，isActive是true或者false，如果是true的时候，会使用前面active的样式

动态属性

在data中声明一个变量，比如x

然后在布局文件中，写这个控件的style，然后属性调用变量x

微信小程序：

参考

我们看到微信中的引用方式还是使用双花括号：
在这里插入图片描述

uni-app

使用v-bind:style，单花括号
在这里插入图片描述
这里的myTop就是data中声明的变量

snotJam
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决在uniapp项目中小程序调用获取微信绑定手机号
web前端进阶 黑客的博客
10-28 1193
注意：一定按照执行步骤，因为有可能获取到的code过期。所以通过第一步拿到code以后就直接执行函数拿到sessionKey（因为这个不会过期！第三部：通过拿到的sessionKey，点击按钮获取encryptedData和iv；注：通过第一步拿到的code，执行函数获得sessionKey；第二部：通过后台写的接口获取sessionKey。注：在onload 中 执行获取code。第一步：获取微信登录中的code。
uniapp基本语法/组件使用
yanghongyan001的博客
03-11 1919
条件渲染 v-if 指令用于条件性地渲染一块内容 <template> <view> <view v-if="now">现在你可以看见我了！</view> </view> </template> <script> export default { data() { return { ...
7.uniapp和小程序数据绑定的学习
m0_49714202的博客
04-10 125
<view> <view>数据绑定的学习</view> <view>{{msg}}</view> <view>{{'你好' + '世界'}}</view> <view>{{1 + 1}}</view> <view>{{flga? '这是反话-我是假的' : '这是反话-我是真的'}}</view> </view> &l.
uni_app 数据绑定的学习
ZgaoYi的博客
12-02 444
uni-app中的数据绑定 在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可 export default { data () { return { msg: 'hello-uni' } } } 插值表达式的使用 利用插值表达式渲染基本数据 <view>{{msg}}</view> 在插值表达式中使用三元运算 <view>{{ flag ? '我是真的':'我是假的' }}</view&g
微信小程序/uniapp：class和style不生效的问题
最新发布
weixin_41513148的博客
07-09 93
非常重要：小程序端不支持 classObject 和 styleObject 语法。文档：https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#class-与-style-绑定 目录对象语法数组语法字符串语法computed其他方案 对象语法登录后复制 <!-...
uniapp动态修改样式，使用style动态修改样式，避坑
我乃世间蓬蒿人
08-17 4450
这里我是写微信小程序，按照uniapp写法应该用upx，但是这里写upx无效，所以应该是根据平台使用对应的像素单位。微信小程序用的rpx，用px也能生效。不知道为什么无效，upx换车px，rpx也无效。所以打算根据计算数据条数修改图表高度。有更好解决办法的希望能留言互相学习。使用echarts做柱状图套嵌在。中，将xy轴颠倒后，不会自动撑大。经过查询后找到以对象的方式放入。下面找到一种，将对象直接写到。...
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
热门推荐
今天,你学习了吗?
01-19 4万+
uniapp开发小程序/h5 ,使用分包,vuex,消息订阅,登录逻辑,自动注册组件等
uni-app 实现小程序 仿微信 我的界面
03-30
【uni-app实现小程序：仿微信“我的”界面详解】 在移动应用开发领域，uni-app是一个备受推崇的跨端框架，它允许开发者用一套代码编写应用，同时发布到多个平台，如微信小程序、支付宝小程序、H5、App等。本教程将...
基于uni-app开发的新闻和资讯类App模板
02-22
9. **适配小程序**：除了原生App，uni-app还能将项目打包为各平台的小程序，模板需要考虑小程序特定的开发规范和限制，如微信小程序的尺寸单位、网络请求的处理等。 10. **版本控制与部署**：使用Git进行版本控制，...
uni app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master（小程序）
04-10
【uni-app 侧边导航分类】是专门为小程序开发的一款组件，它主要用于构建商品分类页面，提供了一种高效、美观的导航解决方案。uni-app 是一个基于 Vue.js 的多端开发框架，能够一次编写，多端运行，支持H5、微信小...
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
1. **uni-app框架**：uni-app是一个基于Vue.js的跨平台开发工具，通过编写一次代码，可以发布到多个平台，如微信小程序、H5、iOS和Android。 2. **自定义组件**：在uni-app中，可以通过创建自定义组件来扩展其原生...
微信小程序实现换肤功能
12-10
pc或者移动端实现换肤功能还是比较简单的，大致就是需要换肤的css，还有正常的css；把当前皮肤类型存入本地；然后通过js读取并判断当前应该加载哪套css。 由于微信小程序没有操作wxss的api，所以实现的方式有点不一样，大致如下： 　　1.需要换肤的wxss，正常的wxss。 　　2.每个页面都引入换肤的wxss（因为换肤每个页面都需要改变）。 　　3.在app.js的globalData里设置默认的皮肤类型。 　　4.每个页面onload的时候，读取storage里的数据并设置当前皮肤类型的值。 例子： 第一步：结构 <view class='page' id='{{SkinStyle
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 833
微信小程序和uni-app面试高频知识点
uni-app运行至微信小程序端style动态绑定失效问题
weixin_43421663的博客
02-23 4021
一、问题描述: 今天开发遇到了一个前端样式问题。由于业务需要，onLoad()获取到手机屏幕长度然后将长度动态绑定至view标签的sytle属性中，在HbuilderX内置浏览器中显示正常，但在微信小程序中却显示不出来绑定的样式，下面是绑定时的代码。 页面标签部分： <view :style="{height:phoneHight}" class="content"> ... ... </view> script部分: export default { da
uni-app微信小程序通过data动态绑定style(:style)语法
LordYuchen的博客
10-16 1037
uniapp开发微信小程序 的:style语法
uni-app中的数据绑定概念是什么？如何用它来实现页面和数据之间的交互？
weixin_42317757的博客
05-28 1254
例如，当用户在页面中输入数据时，数据会自动更新到页面上，同时当数据发生变化时，页面上的数据也会自动更新。Uni-app中的数据绑定是指将数据和页面元素绑定在一起，使数据的变化能够自动反映到页面上。单向数据绑定是指数据变化能够自动反映到页面上，但页面元素的变化不会影响数据。上述代码中，通过{{}}语法将data中的message数据绑定到页面上，当数据发生变化时，页面上的数据也会自动更新。综上所述，Uni-app中的数据绑定可以通过双向数据绑定和单向数据绑定两种方式实现，能够实现页面和数据之间的交互。
uniapp微信小程序系列（4）零散知识点总结
@黄小泽的个人博客
05-12 469
uniapp学习笔记
解决uniapp编译的微信小程序不支持v-bind=“$attrs“
weixin_44441196的博客
04-25 7649
解决uniapp编译的微信小程序不支持v-bind="$attrs"； [vite] [plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not writable. 09:49:27.156 Use a v-bind binding combined with a v-on listener that emits update:x event instead. vue3批量传递属性
uni-app微信小程序爬坑-父组件给子组件传值并绑定到子组件：style以及图片路径问题
黑客与画家
03-26 1233
** 前言 uni-app开发小程序油时候兼容性真的是千奇百怪 今天自己封装了一个无信息占位组件，组件源代码如下： 第一个问题请看注释 <template> <view class="no-tips flex-c-c"> <image :src="imgSrc" :style="[imgStyle]"></image> //这里的imgStyle传过来的是一个对象，如果是这样用： //<image :src="imgSrc" :style=
微信小程序和uni-app的区别
06-09
微信小程序和uni-app都是用于开发跨平台应用程序的工具，但它们存在一些区别。 微信小程序是由微信官方推出的一种应用程序，只能在微信中使用，需要用户下载安装。它使用的是微信开发者工具进行开发，支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值