this.$set()的主要功能是解决改变数据时未驱动视图的改变的问题,也就是实际数据被改变了,但我们看到的页面并没有变化,这里主要讲this.$set()的用法,如果你遇到类似问题可以尝试下,vue官网写的是Vue.set,和this.$set()是一样的,但要注意当前this的指向问题,你要记住时this.$set()时当前this的指向一定要是最外层。

vue和uniapp语法大部分都是相同的,uniapp是针对移动端的,并且可以开发小程序,最重要的区别是uniapp开发小程序时不能操作dom,注意,是不能,不是不建议,操作DOM后编译代码时会报错。

先写下数据

items: [
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" }
]

通常我们改变某个message会这么写

this.items[0].message='one1'; //这么写一般是可以更新视图的 我只是给举this.$set()用法的例子

使用this.$set()时

this.$set(this.items[0],'message','one1');//改成数字类型就不用了加引号

有的时候我们可能一次改多个

this.items[0]={ message: "one3", id: "13" };

使用this.$set()时, 格式this.$set( target, key, value )

this.$set( this.items, 0, { message: "one3", id: "13" })

给大家复现一种不渲染的例子:当前我们数组内有三条对象,那么我想加一条,并且我就不用类似push的东西,还要能渲染到视图

普通写法 不渲染

this.items[3]={ message: "four", id: "4" };//数据已经被改变  但是视图层没渲染,我们看不到

使用this.$set()时, 格式this.$set( target, key, value )

this.$set( this.items, 3, { message: "four", id: "4" })//这样就可以渲染到视图层了

this.$set用法的更多相关文章

  1. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  2. jquery插件的用法之cookie 插件

    一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  4. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  5. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

  9. 萌新笔记——vim命令“=”、“d”、“y”的用法(结合光标移动命令,一些场合会非常方便)

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

  10. [转]thinkphp 模板显示display和assign的用法

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

随机推荐

  1. 压测中的QPS与TPS区别

    原文来自:https://www.cnblogs.com/fkkk/p/11957566.html QPS(每秒查询率)=并发数/平均响应时间 TPS(每秒处理事务数)=请求数/时间(秒) TPS的过 ...

  2. MyBatis 批量插入数据的 3 种方法!

    批量插入功能是我们日常工作中比较常见的业务功能之一,之前我也写过一篇关于<MyBatis Plus 批量数据插入功能,yyds!>的文章,但评论区的反馈不是很好,主要有两个问题:第一,对 ...

  3. C++核心编程 4 类和对象-对象的初始化和清理

    构造函数和析构函数 对象的初始化和清理工作是两个非常重要的安全问题,一个对象或者变量没有初始状态,对其使用结果是未知的,同样,使用完一个对象或变量,没有及时清理,也会造成一定的安全问题.C++利用了构 ...

  4. 详解package-lock.json的作用

    目录 详解package-lock.json package-lock.json的作用 版本号的定义规则与前缀对安装的影响 改动package.json后依旧能改变项目依赖的版本 当前项目的真实版本号 ...

  5. 调试器地址出现大小端紊乱,引发的异常: 0xC0000005: 读取位置 0xFFFFFFFFFFFFFFFF 时发生访问冲突。

    今天在编写一系列新增需求代码后,开始调试代码 发现上个版本正常可运行的代码出现了:引发的异常: 0xC0000005: 读取位置 0xFFFFFFFFFFFFFFFF 时发生访问冲突. 上个版本数代码 ...

  6. 运行WampServer提示计算机中丢失 msvcr110.dll

    ​ 在第一次运行WampServer的时候,出现"无法启动此程序,因为计算机中丢失 MSVCR110.dll.尝试重新安装该程序以解决此问题. ​ 在浏览器的地址栏里输入 http://ww ...

  7. (翻译)领域驱动设计实现-Implementing Domain Driven Design

    简介 Implementing Domain Driven Design 领域驱动设计实现 A practical guide for implementing the Domain Driven D ...

  8. 学习笔记-React的简单介绍&工作原理

    一.React简单介绍 1.React起源于Facebook内部项目,与2013年5月 2.是一个用于构建用户界面的JavaScript库 二.React特点 1.声明式设计-React采用声明范式, ...

  9. 新產品SWOT分析實例

    推出新产品需要解决四个行销支柱: 价格 产品 促销 销售地点 要分析这些方面,请检查您的优势.劣势.机会和威胁,以帮助您在运行第一个广告或举行第一次促销之前将风险降至最低,并最大限度地利用资源.SWO ...

  10. UML图 | 时序图(顺序、序列图)绘制

    上一次写过一篇 UML | 类图 相关的文章,平时规范开发会用的上,或者是写什么文档,就还是需要画图,就像毕业设计就是如此.希望能够帮助到大家. 注:本文中所用画图软件为 Microsoft Visi ...