当前位置: 首页 > news >正文

关于vue中v-for绑定数据重新渲染的问题

我修改被v-for绑定的数据,发现居然不能重新渲染。

查找后得知一下方法:

$set 是 Vue 提供的一个全局方法,用于向响应式对象中添加或更新属性,并触发视图更新。它接受三个参数:对象、要添加/更新的属性名或索引,以及新的值。


// 参数1:绑定数组/对象,参数2: 索引/key, 参数3: 被修改的值
this.$set(this.clsBut[ind], 1, true);

(他虽然这样说,但是我直接修改数组和对象元素,是能够重新渲染,但是v-for渲染数据不可以。)

案例代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue</title><style>.bg {background-color: rgb(255, 0, 0);}</style>
</head><body><div id="demo"><input type="button" :value="item[0]" v-for="(item,index) in clsBut" :class="{'bg':item[1]}"@click="active(item[0])">{{clsBut}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: "#demo",data() {return {name: "qhx",address: "成都",clsBut: [[1, false], [2, false], [3, false], [4, false]],};},methods: {active(index) {let clsButs = this.clsButfor (const ind in clsButs) {if (clsButs[ind][0] == index) {console.log(clsButs[ind][0] == index);this.$set(this.clsBut[ind], 1, true);} else {this.$set(this.clsBut[ind], 1, false);}}this.clsBut = clsButs}},})</script>

http://www.lryc.cn/news/128903.html

相关文章:

  • 全面解析 Axios 请求库的基本使用方法
  • rust踩雷笔记3——生命周期的理解
  • windows权限维持—黄金白银票据隐藏用户远控RustDeskGotoHttp
  • vscode conda activate激活环境出错
  • 信息与通信工程面试准备——数学知识|正态分布|中心极限定理
  • Mybatis多表查询与动态SQL的使用
  • url 和 uri 有什么区别?
  • HCIP VLAN实验
  • 无涯教程-Perl - waitpid函数
  • Redis之缓存雪崩、缓存击穿、缓存穿透问题
  • 九五从零开始的运维之路(其三十五)
  • 5G科技防汛,助力守护一方平安
  • 用easyui DataGrid编辑树形资料
  • Azure存储账户
  • 数字人服装布料解算技术服务,让数字人驱动更真实
  • 达梦数据库安装与初始化超详细教程
  • vue输入框只能输入数字类型,禁止输入和粘贴e
  • 金盘 微信管理平台 getsysteminfo 未授权访问漏洞[2023-HW]
  • 02-前端基础第二天-HTML5
  • i18n 配置vue项目中英文语言包(中英文转化)
  • NFTScan NFT API 在 DID Protocol 开发中的应用
  • 内存管理(1)
  • 实践教程|基于 pytorch 实现模型剪枝
  • [Docker精进篇] Docker镜像构建和实践 (三)
  • 【Unity细节】Unity中的层级LayerMask
  • 修改el-table行悬停状态的背景颜色
  • 记一次mysql not in的使用问题
  • JavaFx基础学习【四】:UI控件的通用属性
  • 【Leetcode】101.对称二叉树
  • 用Java实现原神抽卡算法