解决uniapp v-for数据改变后，页面没渲染的问题

最新推荐文章于 2024-12-08 17:43:13 发布

原创最新推荐文章于 2024-12-08 17:43:13 发布 · 3.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js

本文介绍了如何解决在uniapp使用v-for时遇到的数据改变但页面未重新渲染的状况。通过在需要渲染的DOM元素上添加v-if，并结合一个布尔变量，可以在数据更新后强制刷新视图。具体做法是在更新数据后，先将布尔变量设为false，然后再设为true，从而触发DOM重绘。

解决uniapp v-for数据改变后，页面没渲染的问题

在需要渲染的dom上添加v-if=“boolean”，通过改变boolean来强制刷新dom中的数据，只需要在改变数据后先把boolean设为false，然后再设为true就可以了

<view  v-if="updata"></view>

prevPage.$vm.offerData.offerDeviceList[this.index] = this.deviceInfo;
						prevPage.$vm.updata= false;
						prevPage.$vm.updata= true;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WalnutLin

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue（uni-app）中v-if与动画效果冲突的解决办法

flying meng的菜鸟居

01-14

5911

这两天终于真正接触到了uni-app——其实就是一款基于vue的多端融合产品，它可以调用任意平台的api，已达到“可以顺利登陆各平台”的目的。写demo的时候遇到点麻烦：由于使用了v-if条件判断，所以元素展示很“突兀”，定义的transform根本没有效果！解决办法：改用v-show 使用$nextTick() + setTimeout() 方法： css： .create-cont...

uniapp修改data数据后页面未更新渲染

尐、孽障的博客

06-08

3133

页面渲染相关问题

2 条评论您还未登录，请先登录后发表或查看评论

uniapp v-for数据改变后，页面没渲染的问题

LJJONESEED的博客

06-09

4075

我需要改变item.cValue的值，点击事件以后，怎么改，都渲染不到页面。原来是要然后就是点击事件的时候，先不显示，改变了数据之后再显示就可以渲染到页面了。

uniapp 中使用v-for 偶发列表不渲染（key值动态变化）

qq_55856928的博客

04-06

749

解决办法是把v-for key值全部取循环的索引。可解决办法是用this.$set来设置变化的数组。

【UniApp】v-for列表渲染不执行方法参考解决方案

老邋遢的菜园子

05-09

8346

【UniApp】v-for列表渲染不执行方法参考解决方案问题描述熟悉Vue的小伙伴一定很熟悉v-for 而使用Vue语法做跨端开发的UniApp也对v-for提供了良好的支持以下是一段简单的uniapp使用v-for演示 <view v-for="(item,index) of 100" :key="index"> {{item}} </view> 效果演示接下来为了更加接近生产环境，我们在页面加载的时候生成一个列表并循环（实际开发一般是请求API接口）附上in

解决uniapp中数据请求到但是未渲染

zyl19950717的博客

07-06

5726

解决常见的uniapp中请求数据无法渲染的问题

【零基础学会uniapp系列】4、列表渲染 v-for

一个热爱互联网的年轻小伙子

10-25

1535

a. 基于数组的循环 v-for 指令可以实现基于一个数组、对象来渲染一个列表。 v-for指令需要使用item[,index] in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名第一个参数item：是被迭代的数组元素的别名。第二个参数index：即当前项的索引，是可选的。 <template> <view> <view v-for="item,index in array...

【uniapp】swiper切换时，v-for重新渲染页面导致文字在视觉上的拉扯问题

xiaotangyu7dong的博客

12-08

767

先用v-for渲染了几个列表，但这几个列表是占同一个位置的，只是通过切换swiper来显示哪个列表显示，也就是为了优化页面切换时候，没有根据swiper的current再更新v-for的数据，但现在就有个问题，怎么隐藏这些列表，并且不占dom。v-if控制的时候，会出现非常明显的重新渲染的闪屏现象。然后通过clip属性来裁剪元素，当裁剪区域设置为0时，元素在视觉上就被隐藏了。这种方式下元素仍然在DOM中，但不占据布局空间，并且避免了v - if的重新渲染闪屏问题。// Swiper的配置选项。

uniapp使用swiper动态渲染数据时页面没有自动更新数据&&swiper渲染优化

一粒程序米

08-26

4634

uniapp使用swiper动态渲染数据时页面没有自动更新数据&&swiper渲染优化

v-for出来的数据如何实现点击那个元素，那个元素样式变化

m0_49270052的博客

08-13

665

# v-for出来的数据如何实现点击那个元素，那个元素样式变化 ## 首先在template <template> <div class="btn"> <div :class="active===index1?'btna':'btns' " v-for="(item,index1) in btn" :key="index1" @click="contr...

uni-app (v-for 渲染image不渲染)

weixin_62526709的博客

09-04

1346

uni-app (v-for 渲染image不渲染)

v-for循环空数组异常渲染排查解决【uniapp,微信小程序,vue】

General_D的博客

12-04

2527

列表异常显示空行，但部分正常，怀疑是渲染问题。通过源码我们得知渲染使用了v-for，咱们分为两种情况进行排查,那就先排除一个最简单的，是否存在换行符；其次排除是否存在异常渲染的情况，如渲染了看不见，渲染了空元素。

vue或者uniapp修改数据后页面不重新渲染

weixin_47586598的博客

02-28

1983

【代码】vue或者uniapp修改数据后页面不重新渲染。

uni-app （vue ) 数据变化，页面不重新渲染的问题

我的博客

08-03

4275

前几天遇到一个问题当我点击取消收藏按钮的时候，再重新刷新页面，会发现第2个项目里的爱心按钮还是空心的按理说，收藏页面的所有线路，按钮都是已经收藏的状态，应该是实心爱心图标，可是只要我之前点过取消，让按钮变成空心状态，它就会一直是空心状态。很明显，子组件的数据变化了，但是反应在页面上，没有重新渲染。最后找到原因 <template> <view> <busLine v-for="(item,index) in lines" :line="ite.

【避坑】VUE uniapp ，父组件List改变，子组件渲染不符合预期问题【v-for】

sinat_36901134的博客

09-15

345

原因是vue内部组件缓存机制导致的。,解决方案：为每个组件添加key，下图是官方解释：

uniapp生成小程序后改动数据无法渲染

zepcjsj0801的博客

04-04

1308

无意间遇到的问题，也可能是我代码的问题。循环组件中使用了uni-data-picker，通过其他标签事件改动数据picker数据后，要让uni-data-picker渲染出来，H5是没问题的，但是发布成微信小程序时却无效。摸索了半天，发现的微信小程序循环组件中的变量中会增加一个 $orig vue中的uni-data-picker的值用的是v-model，发布的小程序中还是原样，所以缺少一个$orig 几次尝试后，发现vue中这样写发布后可以正常转换 :value=“xxx” 记录一下，免得以后走弯

uniapp_vue_更改数据后_页面组件的值未刷新

yfx000的专栏

05-08

6282

一般来说页面和数据是双向绑定的，数据改变页面就会改变，可是有时候页面数据改变后，APP上页面不刷新可能原因：可能是对象层数太深了通用解决办法：控制未刷新组件，先不显示，再显示 1、组件添加v-if控制显示 <hx-number-box v-if="showNumberBox"></hx-number-box> 2、刷新方法 let that = this; that.showNumberBox = false; that.$nextTick...

问题：uniapp中增删改数据有变化但是为什么渲染不出来？

SunPeng的博客

06-07

827

uniapp中数据有变化但是为什么不渲染出来？

uniapp 列表渲染 v-for

caizhihong的专栏

02-07

926

在使用v-for 渲染列表时需要注意加入key = index 参数.否则会出现渲染上的问题,为了提高渲染效率

uniapp column-count 动态数据

最新发布

07-08

<think>我们正在讨论的是在UniApp中动态设置column-count样式属性。根据用户的问题，他希望在UniApp中动态设置一个元素的column-count样式。在UniApp中，我们通常使用Vue的语法，并且样式可以绑定在元素上。注意：在UniApp中，我们通常使用内联样式绑定（:style）来动态设置样式属性。但是，需要注意的是，column-count是一个CSS3属性，用于多列布局。在移动端，这个属性的支持性较好，但在一些低版本浏览器中可能不支持。根据用户提供的引用[1]中，有一个例子展示了如何使用CSS的columns属性（包括column-count和column-width）。在UniApp中，我们可以通过动态绑定样式来实现。步骤： 1. 在Vue组件的data中定义一个变量，比如columnCount，用于存储要设置的列数。 2. 在模板中，使用:style来动态绑定样式对象。注意：在UniApp中，我们可以使用对象语法或者数组语法来绑定样式。例如： <view :style="{ 'column-count': columnCount }"> 内容... </view> 或者，我们也可以使用计算属性来生成样式对象。但是，需要注意的是，在微信小程序等平台，CSS变量可能不被支持，所以直接使用对象语法设置属性即可。另外，用户提供的引用[2]中有一个使用scroll-view的例子，但用户的问题是关于column-count的，所以我们不需要处理滚动问题。示例代码：在模板中： <template> <view>  <view :style="{'column-count': colCount, 'column-gap': '10px'}"> <view v-for="(item, index) in list" :key="index" class="item"> {{item}} </view> </view>  <button @click="changeColumnCount">改变列数</button> </view> </template> 在脚本中： <script> export default { data() { return { colCount: 2, // 初始列数 list: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] // 示例数据 } }, methods: { changeColumnCount() { // 例如，每次点击在1到4之间循环 this.colCount = this.colCount % 4 + 1; } } } </script> 注意：在样式中，我们可能需要设置每个项目的样式，例如： .item { break-inside: avoid; /* 防止项目被分割到两列 */ margin-bottom: 10px; } 但是，由于UniApp中样式是全局的，所以建议在组件的style标签中加上scoped，或者使用class来限定作用域。另外，column-count属性在H5和微信小程序中都是支持的，但为了更好的兼容性，我们可以同时使用浏览器前缀（但UniApp的编译过程会自动添加前缀，所以通常不需要自己写）。如果用户需要根据屏幕宽度动态调整列数，也可以结合onResize事件，但这里用户只是要求动态设置，所以我们可以通过改变colCount的值来实现。最后，关于引用标识，由于用户提供的引用[1]和[2]并没有直接与column-count在UniApp中动态设置相关的内容，所以我们可以不添加引用标识。但是，如果用户需要引用，我们可以参考引用[1]中关于columns的CSS样式示例。因此，我们可以这样总结：在UniApp中，通过Vue的数据绑定和样式绑定，可以轻松实现动态设置column-count。主要步骤是在data中定义变量，然后在模板中通过:style绑定。相关问题： 1. 在UniApp中动态设置样式有哪些方法？ 2. column-count属性在移动端和小程序中的兼容性如何？ 3. 如何防止多列布局中的内容被分割？</think>在 UniApp 中动态设置 `column-count` 样式属性，可以通过 Vue 的数据绑定特性实现。以下是具体实现方法和注意事项： ### 实现步骤 1. **数据驱动样式** 在 Vue 的 `data` 中定义控制列数的变量（如 `columnCount`），通过 `:style` 绑定到目标元素： ```vue <template> <view :style="{ 'column-count': columnCount }">  <view v-for="item in 20" :key="item">项目 {{ item }}</view> </view> <button @click="changeColumn(3)">切换为3列</button> </template> <script> export default { data() { return { columnCount: 2 // 默认2列 } }, methods: { changeColumn(count) { this.columnCount = count // 动态修改列数 } } } </script> ``` 2. **兼容多端样式** 添加浏览器前缀保证兼容性（UniApp 编译时会自动处理）： ```vue <view :style="{ 'column-count': columnCount, '-webkit-column-count': columnCount // 兼容 WebKit 内核 }"> ``` 3. **辅助样式优化** 防止内容被分列截断： ```css <style> /* 在 style 标签中定义 */ .multi-column { column-gap: 20rpx; /* 列间距 */ } .multi-column > view { break-inside: avoid; /* 防止内容分割 */ margin-bottom: 16rpx; } </style> ``` ### 注意事项 1. **平台差异** - 微信小程序：全版本支持 `column-count` - H5：需注意低版本浏览器兼容性（可通过 `-webkit-` 前缀解决） - 安卓/iOS：主流机型均支持[^1] 2. **性能优化** 当内容量过大时（如超过 100 项），建议： - 使用 `scroll-view` 包裹分列容器 - 添加 `overflow: auto` 防止渲染卡顿 ```vue <scroll-view scroll-y style="height: 80vh"> <view :style="{ 'column-count': columnCount }">...</view> </scroll-view> ``` 3. **动态响应** 结合屏幕宽度自动调整列数： ```js export default { methods: { updateColumns() { const screenWidth = uni.getSystemInfoSync().screenWidth this.columnCount = screenWidth > 600 ? 4 : 2 // 响应式列数 } }, onLoad() { this.updateColumns() uni.onWindowResize(() => this.updateColumns()) // 监听窗口变化 } } ``` ### 示例效果 ```plaintext | 项目1 | 项目3 | 项目5 | | 项目2 | 项目4 | 项目6 | ``` 点击按钮后列数实时更新，无需刷新页面[^2]。