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

最新推荐文章于 2024-08-23 11:16:55 发布
原创 最新推荐文章于 2024-08-23 11:16:55 发布 · 1.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍微信小程序uni-app的数据绑定、样式绑定及动态属性应用技巧。通过具体示例讲解如何在uni-app中进行数据绑定，包括使用双花括号语法、条件渲染以及样式动态绑定的方法。

文章目录

数据绑定

微信小程序

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

uni-app中绑定数据

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

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

样式绑定

小程序

可以查看：
博文一
博文二

在这里插入图片描述

uni-app

参考博文

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

动态属性

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

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

微信小程序：

参考

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

uni-app

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

微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 1228
微信小程序和uni-app面试高频知识点
【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(六）---文章编辑修改功能与局部刷新返回
goolean的专栏
05-26 324
文章编辑修改功能与局部刷新返回
微信小程序修改数组中的某个元素
qq_48789210的博客
09-23 933
在写小程序收尾的阶段，我们可能会遇到一些问题，我也找了一些其他的方法，最后我还是决定把记录一下采用的方法，我们可以在同一个数组里面修改更换的元素，也可以更换两个不同数组之间的元素 如何在其他模块拿用户登陆的名字
uniapp(一) 之 小程序与uniapp 基础
沉淀，积累、进步
06-01 575
小程序准备以及相关uni-app工具准备
微信小程序动态改变数组中某个对象的某个元素值
liyucheng777的博客
04-27 3754
功能：根据用户的点击事件，判断用户选择的选项后，页面显示用户所选内容 改变含有若干对象且对象中包含数组元素的数组中的某一个值，而不是改变整个数组 知识点： 1.选中数组中特定项，并为其赋值 //index代表要改变的元素在数组中的索引 [`Motor_symptoms[${index}].yesOrno`]:1 2. .wxml <view wx:for="{{Motor_symptoms}}" wx:key="id" > ...
uni-app 和原生小程序开发区别
wssg1206的博客
09-21 157
【代码】uni-app 和原生小程序开发区别。
Uni-App 中使用微信小程序开发，你可以通过以下步骤来设置节点属性
T3165919332的博客
07-25 1253
【代码】Uni-App 中使用微信小程序开发，你可以通过以下步骤来设置节点属性。
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-bottom-navigation-master.zip
12-17
1. **uni-app框架**：uni-app是一个基于Vue.js的跨平台开发工具，通过编写一次代码，可以发布到多个平台，如微信小程序、H5、iOS和Android。 2. **自定义组件**：在uni-app中，可以通过创建自定义组件来扩展其原生...
uni app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master（小程序）
04-10
【uni-app 侧边导航分类】是专门为小程序开发的一款组件，它主要用于构建商品分类页面，提供了一种高效、美观的导航解决方案。uni-app 是一个基于 Vue.js 的多端开发框架，能够一次编写，多端运行，支持H5、微信小...
uni_app 数据绑定的学习
ZgaoYi的博客
12-02 543
uni-app中的数据绑定 在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可 export default { data () { return { msg: 'hello-uni' } } } 插值表达式的使用 利用插值表达式渲染基本数据 <view>{{msg}}</view> 在插值表达式中使用三元运算 <view>{{ flag ? '我是真的':'我是假的' }}</view&g
7.uniapp和小程序数据绑定的学习
m0_49714202的博客
04-10 171
<view> <view>数据绑定的学习</view> <view>{{msg}}</view> <view>{{'你好' + '世界'}}</view> <view>{{1 + 1}}</view> <view>{{flga? '这是反话-我是假的' : '这是反话-我是真的'}}</view> </view> &l.
uni-app微信小程序绑定自定义属性-下标index
wanzx666的博客
05-14 4757
<view class="changWork" v-for="(item, index) in messageInfo" :key="index" @touchstart="touchS" @touchend="touchE" @touchmove="touchM" :data-index="index"> 加上data-index 属性 即可 然后在元数据e下面的 e.currentTarget.dataset.index;即可拿到数据 ...
uniapp（微信小程序如何使用单选框、复选框）
最新发布
weixin_51480428的博客
08-23 3101
说明：selected用来记录每次用户选择的值，当是单选的时候属性中的selected属性需要设置成字符串，当是复选框的时候，此时选择的是数组，selected属性应设置为数组。disabled属性是配合组件使用的，意思是是否禁用该选项，name属性用来将选项渲染给用户看，_name是根据我自己的业务需求设计的，我的需求是记录用户选择的每个选项，我需要根据用户的选项在表单上进行定位，最终生成pdf文件。此处需要将用户选择的非空选项对应的_name值记录到一个数组中去。
uniapp动态修改样式，使用style动态修改样式，避坑
我乃世间蓬蒿人
08-17 4687
这里我是写微信小程序，按照uniapp写法应该用upx，但是这里写upx无效，所以应该是根据平台使用对应的像素单位。微信小程序用的rpx，用px也能生效。不知道为什么无效，upx换车px，rpx也无效。所以打算根据计算数据条数修改图表高度。有更好解决办法的希望能留言互相学习。使用echarts做柱状图套嵌在。中，将xy轴颠倒后，不会自动撑大。经过查询后找到以对象的方式放入。下面找到一种，将对象直接写到。...
解决在uniapp项目中小程序调用获取微信绑定手机号
web前端进阶 黑客的博客
10-28 1385
注意：一定按照执行步骤，因为有可能获取到的code过期。所以通过第一步拿到code以后就直接执行函数拿到sessionKey（因为这个不会过期！第三部：通过拿到的sessionKey，点击按钮获取encryptedData和iv；注：通过第一步拿到的code，执行函数获得sessionKey；第二部：通过后台写的接口获取sessionKey。注：在onload 中 执行获取code。第一步：获取微信登录中的code。
uni-app：数据绑定
wuwuFQ的博客
02-24 2513
HTML <template> <view v-for="(item,index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index"> <view :class="tabIndex === index?'pagecontrol-top-selected':'pagecontrol-top-normal'">
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
热门推荐
今天,你学习了吗?
01-19 4万+
uniapp开发小程序/h5 ,使用分包,vuex,消息订阅,登录逻辑,自动注册组件等
uni-app通用登录页面模板，支持Vue与小程序
在现代前端开发中，尤其是移动端跨平台应用的开发领域，uni-app 作为一种基于 Vue.js 的高性能跨平台框架，已经被广泛应用于小程序、H5、App 等多端项目的统一开发。而登录页面作为几乎所有应用程序的入口界面，其...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值