小程序原生动态style和class的方法

这篇具有很好参考价值的文章主要介绍了小程序原生动态style和class的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原生小程序的动态绑定与vue的还是有区别的,记录下原生小程序的动态绑定style和class

动态绑定style

<image wx:if="{{showType != '4' && item.isShowErCode && item.signQr}}" catchtap="showErcodeHandle"
                    data-item="{{item}}"
                    style="width:60rpx;height:60rpx;margin-left:{{bgType ==1?'margin-left:-4rpx':''}}"
                    src="{{item.signQr || 'https://img.yzcdn.cn/vant/cat.jpeg'}}">

动态绑定class

<view class="w-btn {{item.watchFlag? 'active':''}}" data-item="{{item}}" bindtap="watchHandle">
                    {{item.watchFlag?'已关注':'关注'}}
                </view>

然后就和正常的操作没什么区别了。。。文章来源地址https://www.toymoban.com/news/detail-504564.html

到了这里,关于小程序原生动态style和class的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • class与 style绑定

    在Vue中,我们可以通过绑定不同的class来实现对元素的样式操作。Vue提供了多种方式来绑定HTML class,包括对象语法、数组语法以及在组件上使用class属性。 对象语法允许我们根据不同的条件来动态地添加或删除class。以一个按钮元素为例,我们可以使用v-bind指令来绑定一个对

    2024年02月15日
    浏览(27)
  • Vue教程(五):样式绑定——class和style

    样式提前准备 绑定class样式——字符串写法 适用于: 样式的类名不确定,需要动态指定 html: js: 效果: 绑定class样式——数组写法 适用于: 要绑定的样式个数不确定,名字也不确定 html: js 效果: 绑定class样式——对象写法 适用于: 要绑定的样式个数确定,名字也确定,

    2024年02月12日
    浏览(27)
  • vue使用三元表达式设置style,class

    前言 前端开发中,面对复杂的布局,有时会需要用到三元表达式,来设置布局样式。 实现 一、设置style,使用 :style=\\\"{ \\\'样式名\\\' : \\\'样式值\\\' }\\\" 来设置,必须是字符串形式。 二、设置class, 1、数组形式 注意:数组中的item必须加引号。若不加引号,代表的时data中的一项对象,

    2024年02月11日
    浏览(26)
  • vue动态绑定class的几种方法

    一、对象语法 1、给v-bind:class 设置一个对象,可以动态地切换class,例如: 最终渲染结果: div class=\\\"active\\\"/div 2、对象中也可存在多个属性,动态切换class,:class 可以合class共存 最终渲染结果: div class=\\\"static active\\\"/div 3、当:class的表达式过长或逻辑复杂时,可以绑定一个计算

    2024年02月13日
    浏览(28)
  • 微信小程序中如何动态添加 class 属性

    在微信小程序中,你可以使用setData方法来动态添加class。首先,在你的页面的js文件中,定义一个变量来存储需要动态添加的class,例如: 然后,在需要动态添加class的地方,使用setData方法来更新dynamicClass的值,例如: 最后,在你的wxml文件中,使用动态绑定的方式来添加cl

    2024年02月11日
    浏览(32)
  • 视频讲解vue2基础之style样式class类名绑定

    目录  style样式的动态绑定 class类名动态绑定 一:官方给出的写法 二:自创三元表达式写法  详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定(小案例)_哔哩哔哩_bilibili 详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定

    2023年04月15日
    浏览(38)
  • 微信小程序动态绑定class样式类(三木运算)

    直接上代码,循环列表,根据选中状态显示不同的样式,active就是你在wxss文件里面创建的类名 当然可以同时引用多个,如view class=\\\"E F {{ 表达式?\\\'A\\\':\\\'B\\\' }} {{ 表达式?\\\'C\\\':\\\'D\\\' }}\\\"/view这行代码引用了类E,F,选择引用A或B,选择引用C或D 也可以把三元判别式最后的参数去掉,以达到某

    2024年02月12日
    浏览(26)
  • Vue2 第五节 class与style绑定,条件渲染和列表渲染

    1.class与style绑定 2.条件渲染 3.列表渲染 (1)绑定class 就是用v-bind绑定一个class 有三种不同的写法 1. 字符串写法:适用于样式的类名不确定,需要动态指定    2.数组写法:适用于要绑定的个数个名字都不确定,数组中的样式连同class里面有的样式都会绑定到div中    3. 对象写

    2024年02月15日
    浏览(21)
  • 032:vue中三元运算, style、class、type、 event等多种场景示例

    第032个 查看专栏目录: VUE ------ element UI 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,upda

    2024年02月07日
    浏览(30)
  • uniapp中微信小程序不能编译style绑定方法的解决方案

    这是我的代码设置了根据传参显示不同字体颜色和不同背景色 这两个方法我都写在methods中 在浏览器中H5和app模拟器的效果是一样的如图 在HbuildX中运行至微信开发者工具无效,并且报错如图 第一步 第二步 在computed添加如下代码 至此修改成功,微信开发者工具运行效果如图所

    2024年02月16日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包