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. 看完小白也会使用,Android投屏神器scrcpy详细教程

    楔子 做为一个软件测试工程师,在使用手机测试的时候,缺陷附件想附上截图.视频,需要从手机把图片.视频发送到拷贝或发送到电脑,非常麻烦. 所以想到使用投屏软件,把手机的屏幕投屏到电脑,便可以直接在电脑上 ...

  2. python mysql增加改查

    #python mysql增加改查,方便日后copy/paste .......... 1 #encoding: UTF-8 2 import pymysql 3 # # 打开数据库连接 4 db = ...

  3. P5056-[模板]插头dp

    正题 题目链接:https://www.luogu.com.cn/problem/P5056 题目大意 \(n*m\)的网格,求有多少条回路可以铺满整个棋盘. 解题思路 插头\(dp\)的,写法是按照 ...

  4. Spring,IOC源码分析

    有错勿喷 1.首先是Spring,IOC的基本概念 IOC是一个容器 容器启动的时候创建所有单实例对象 我们可以直接从容器中获取到这个对象 2.调试流程 ioc容器的启动过程?启动期间都做了什么(什么 ...

  5. Spring中IOC的理解

    Spring中IOC的理解 1.什么是IOC? (1)控制反转.把对象创建和对象间的调用过程交给Spring进行管理. (2)使用IOC的目的:为了耦合度降低. 2.IOC底层原理? (1)xml解析 ...

  6. enum 试图表达64位数

    enum AttributeType: unsigned long long{ aa = 1, bb = 2, cc = 0x842AC1040000}; int main() { DWORD64 b ...

  7. linux下修改IP地址的方法

    linux下修改IP地址的方法 1.网卡的命名规则 在centos7中,en表示着:ethernet以太网,即现在所用的局域网,enX(X常见有以下3种类型) 2.IP地址的临时修改(重启后失效) 查 ...

  8. 每日总结:Java课堂测试第三阶段第二次优化 (四则运算) (2021.9.22)

    package jisuan2; import java.util.*;import java.util.Scanner; public class xiaoxue { public static v ...

  9. Python读取Excel表格

    前言:需要进行自动化办公或者自动化测试的朋友,可以了解下此文,掌握Python读取Excel表格的方法. 一.准备工作: 1.安装Python3.7.0(官网下载安装包) 2.安装Pycharm(官网 ...

  10. 【UE4 C++】解析与构建 XML 数据,XmlParser 与 tinyxml

    XmlParser 简单读取 XmlParser 为引擎自带模块 XML 文件 <?xml version="1.0" encoding="UTF-8"? ...