vue中 this.$set

news/2024/7/10 0:54:19 标签: vue

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,再次给数据赋值时,有时候并不会更新到视图上,如下所示:

data () {
  return {
    list: [
    	{ name: "zhangsan", id: "1" },
        { name: "lisi", id: "2" },
        { name: "wangwu", id: "3" }
    ],
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ——钩子函数,实例挂载之后
 this.items[0] = { name:'one',id:'4'} //此时对象的值更改了,但是视图没有更新
 
 let art = {name:'one',id:"4"}
 this.$set(this.items,0,art) //$set 可以触发更新视图

 this.student.age = 24  //此时对象的值更改了,但是视图没有更新
 this.$set(this.student,"age", 24) //$set 可以触发更新视图
}

http://www.niftyadmin.cn/n/1770312.html

相关文章

uni-app 微信小程序运行和打包

1、首先要下载安装微信开发者工具(若已安装,则可以忽略) 下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2、下载完成,然后安装。 3、在程序中配置微信开发者工具的安装位置 ①…

vue实现点击某个dom元素之外的方法

在项目开发中搜索按钮点击出现搜索框内容,这个时候点击搜索框以外的内容,搜索框隐藏掉,如下所示: 1、源码 2、实现点击其他区域搜索框内容隐藏,如下: document.addEventListener(click, (e) > {if (…

vue实现回到顶部功能

废话不多说&#xff0c;先来上代码 <template><div class"backtop-wrapper" v-if"btnFlag"><p click"backTop"><img src"/assets/img/backtop.png" alt""></p></div> </template&g…

vue 多行超出显示省略号 打包后-webkit-box-orient:vertical属性被移除导致失效

1、在vue项目中有时候会有固定多少行超出显示点点的需求&#xff0c;实现代码如下&#xff1a; .info{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}2、测试环境正常&#xff0c;但是build打包之后就…

视频标签video属性讲解

<videoid"video" src"video.mp4" controls "true"poster"images.jpg" /*视频封面*/preload"auto" webkit-playsinline"true" /*这个属性是ios 10中设置可以让视频在小窗内播放&#xff0c;也就是不是全屏播放…

h5页面与原生ios交互

app中有的是用h5页面来实现的&#xff0c;这个时候就避免不了与原生去交互。交互的方式 ①、系统原生的方式 &#xff08;我们项目中使用的&#xff09; ②、用第三方库WebViewJavascriptBridge &#xff08;比较早了&#xff0c;一直没有更新维护&#xff09; ios使用原生的方…

什么是promise?promise的作用是什么?

什么是promise&#xff1f; 1、主要用于异步计算 2、可以将异步操作队列化&#xff0c;按照期望的顺序执行&#xff0c;返回符合预期的结果 3、可以在对象之间传递和操作promise&#xff0c;帮助我们处理队列 为什么会有promise 为了避免界面冻结&#xff08;任务&#xff0…

Promise.all和Promise.race的使用

一、Promise.all的使用 Promise.all可以将多个promise实例包装成一个新的promise实例。同时&#xff0c;成功和失败的返回值是不同的&#xff0c;成功的时候返回的是一个数组&#xff0c;失败的时候返回最先reject失败状态的值。 let p1 new Promise((resolve, reject) >…