for循环渲染时点击加样式（单个）

最新推荐文章于 2022-08-30 23:52:50 发布
最新推荐文章于 2022-08-30 23:52:50 发布
阅读量754 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35012392/article/details/84850093
版权 
 <block wx:for="{{commentContent}}" wx:for-index="comNum" wx:for-item="comItem">

                <view class="commentContent">
                        <image class="commentHead" src="{{comItem.imgHead}}" mode='aspectFit' lazy-load="false" />
                        <text class="commentTel">{{comItem.tel}}</text>
                        <view class="contentText">{{comItem.content}}</view>
                        <image wx:if="{{comItem.images}}" class="commentPhoto" src="{{comItem.images}}" mode='aspectFit'></image>
                        <view class="commentBotten" hover-class="none" hover-stop-propagation="false">
                                <view class="commentDate" hover-class="none" hover-stop-propagation="false">
                                        {{comItem.date}}
                                </view>
                                <block wx:if="{{comindex==comNum}}">
                                        <view bindtap='zanClick' data-index="{{comItem}}" class="commentZan yizan"
                                                hover-class="none" hover-stop-propagation="false">
                                                <image class="" src="../../images/yizan.png" mode="aspectFit" lazy-load="false"
                                                        binderror="" bindload="" />
                                                <text class="">{{comItem.zanNum}}</text>
                                        </view>
                                </block>
                                <block wx:else>
                                        <view bindtap='zanClick' data-index="{{comNum}}" class="commentZan zan"
                                                hover-class="none" hover-stop-propagation="false">
                                                <image class="" src="../../images/zan.png" mode="aspectFit" lazy-load="false"
                                                        binderror="" bindload="" />
                                                <text class="">{{comItem.zanNum}}</text>
                                        </view>
                                </block>




                        </view>
                </view>
        </block>

 

有一头杨罗马
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序for循环添加不同样式
weixin_51110842的博客
06-08 293
添加自定义index 然后根据自定义的index去进行三目判断 <block a:for="{{icon}}"> <view class='{{index===0?"integral1":index===1?"integral2":index===2?"integral3":index===3?"integral4":index===4?"integral5":""}}'data-index='{{index}}' onTap="effect">
JS--循环渲染页面以及添加点击事件 && JS提示信息显示编写
heavenz19的博客
07-26 858
JS–循环渲染页面以及添加点击事件 function goodsAll(keywords, is_show, type_id) { $.ajax({ url: urlLink + 'goods_all', data: { keywords: keywords, is_show: is_show, type_id: type_id, }, type: 'POST', dataType: "json", header: { 'content-type': 'mu
vue——如何给v-for循环出来的元素设置不同的样式
热门推荐
weixin_44613294的博客
01-23 1万+
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 &amp;lt;div v-for=&quot;(i,a) in serve&quot; class=&quot;sever_box2&quot;&amp;gt; &amp;lt;div :class=&quot;sstt[a]&quot;&amp;gt; &a
条件渲染和循环渲染
qq_48321086的博客
08-30 197
v-if和v-show的功能是一样的 都是当变量值为true时显示 为false时隐藏 但是v-if隐藏是通过移除节点在节点树中的位置，而v-show是通过给标签添加display：none属性实现隐藏效果 就是说v-if是将标签从节点树中直接删除 而v-show是通过给标签添加属性实现的。v-show具有较高的性能消耗,常常用在频繁切换的模块中（虽然解决了消耗问题 但是因为虽然隐藏 但内容都在 所以会给内存造成一定的压力 一般用于需要频繁切换的模块中）...
vue2.0 可折叠列表 v-for循环展示的实例
10-18
在这个实例中，我们将探讨如何使用`v-for`循环来遍历数据并展示列表，以及如何通过点击事件控制列表的展开和折叠。下面我们将详细分析这个实例中的关键点。 1. **`v-for`循环**： `v-for`是Vue中的一个指令，用于...
小程序瀑布流效果源码
09-09
- 可以设置不同屏幕尺寸下的样式，或者使用媒体查询（`@media`）来实现响应式布局。 6. **滚动监听**： - 使用`onReachBottom()`事件监听用户滚动到底部的行为，触发加载更多数据的逻辑。 - 要注意设置适当的...
你不知道的高性能JAVASCRIPT
11-22
在循环方面，JavaScript提供了多种循环结构，如传统的for循环、for...in循环以及基于函数的循环（如数组的forEach方法）。其中，最原始的for循环通常具有最佳的性能，而for...in循环由于每次迭代都会产生额外开销，...
vue-todolist:Vue中的待办事项清单
03-30
Vue还提供了`v-if`和`v-show`指令进行条件渲染，以及`v-for`指令用于循环渲染列表。在`TodoList`组件中，我们可以使用`v-for`遍历数据列表并渲染多个`TodoItem`组件。如果希望根据任务的状态隐藏或显示`TodoItem`，...
使用React做一个颜色生成器的小demo
07-18
当用户点击任一色块时，该色块所对应的颜色值会被复制到剪贴板，方便后续使用。 首先，让我们深入了解一下React。React是由Facebook开发的一个用于构建用户界面的JavaScript库，它专注于视图层。React通过组件化的...
vue 循环一个div渲染多个背景色
cainiaohhhh的博客
08-12 1735
<view class="the_class_record_box_con_list" v-for="(item, index) in list" :key="index" :class="{ active: index % 7 == 0, active1: index % 7 == 1, active2: index % 7 == 2, active3: index % 7 == 3, active4: index % 7 == 4, activ.
ajax 求数据 双重for循环渲染数据
夜惊如水
04-28 2004
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
循环添加点击事件、循环添加元素标签、获取标签属性的值、给所有设置css值
码渝的博客
05-11 3314
$(".jingjiren").bind('click', function() { }); /*选择ul标签用来添加li*/ const ul = $(".listul"); /*置空*/ ul.empty(); /*循环添加*/ for (var i=0;i&lt;dat.pageList.length;i++){ ul.append("&lt;li&gt;&lt;/li&g...
小程序在循环中单独给某个元素加样式
张木期的博客
04-22 1003
效果如上，点击哪一项给哪一项加个背景色，这个我想复杂了，直接参考v-for就行了 循环数组 v-for="(item,index) in arr" 在arr里继续写 :class="index == 0 ? 'clickNow':' '";//index后是对应下标 可以在clickNow中添加对应的样式 上具体代码 <view class="title"> 您是学生的什么？</view> <van-grid column-num="2" class="box" .
05-vue-条件循环渲染样式
m0_57103348的博客
08-30 353
1.使用的变量为true就显示,false就隐藏。2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果。3.v-if的做法是删除节点,v-show做法是操作css的display:none。2.在vue2.0中,v-if和v-for写在一起时候会出现的问题(面试)v-if具有较高的 切换消耗,常常用在用户不常切换的模块。v-show具有较高的性能消耗,常常用在频繁切换的模块中。切换模块，它的属性值等会占用内存，更高的内存消耗。根据它们底层的设计不一样有各自的使用场景。...
前端Vue循环渲染列表v-for奇数行或者偶数行加样式两种方法动态绑定class
m0_49714202的博客
01-28 5052
直接复制页面查看想要的效果 <template> <div> <!-- %前端代表 取余数 --> <ul> <!-- (用哪个注释掉哪个，list-item这是原始样式，若使用奇数，则设置的是偶数行样式，反之亦然) --> <li class="list-item" v-for="(item, index) in list"> <!-- 第一种： -->
themlef模板引擎的简单运用
wuwuwulelele的博客
09-20 1万+
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>照片列表</title> </head> <body> 照片列表 ...
uniapp购物车如何实现默认地址单个按钮来回切换，用0和1表示，页面如何写
最新发布
07-16
2. 在页面中展示地址列表，可以使用`v-for`指令循环渲染地址列表，同时根据`defaultAddress`状态变量来设置默认地址按钮的选中状态，例如： ```html <div v-for="address in addressList" :key="address.id"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值