vue或uniapp中this.$set()时的语法格式(写法)

this.$set()的主要功能是解决vue语法中改变数据时未驱动视图的改变,也就是实际数据被改变了,但我们看到的页面并没有变化,在此呢复现问题的代码我就不给你写了,这里主要讲this.$set()的用法...

this.$set()的主要功能是解决vue语法中改变数据时未驱动视图的改变,也就是实际数据被改变了,但我们看到的页面并没有变化,在此呢复现问题的代码我就不给你写了,这里主要讲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" })//这样就可以渲染到视图层了


你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章