- 页面属性渲染问题
在 vue 的开发中, 我们最常用的是 vue 的双向绑定的属性,我们将属性定义在data () { 属性名:属性默认值 }
中,同时在页面中使用{{ this.属性名 }}
,vue 在加载时会将默认值渲染到{{ this.属性名 }}
中进行显示,当在 js 中通过this.属性名 = XXX
进行修改值时,{{ this.属性名 }}
会被实时同步修改显示,如果在开发中遇到修改值,页面未同步改变问题时,需要排查当前 this 的指向问题,看当前的 this 是否指定的是全局的,这里推荐是用箭头函数:方法名 = (传入参数值) => { this.属性名 = xxx }
的方式进行修改,在此箭头函数中 this 永远指向的是全局的。如果还是遇到无法同步渲染的问题,就需要排查定义的属性,修改的属性,页面显示的属性是否大小写一致,是否完全相同等。 - 集合修改其中一项的值,页面未同步渲染问题
我们在 vue 的开发中往往需要修改集合中某一项的值,如:下拉框的选中属性,当我们将集合中的其中一项进行修改后,js 通过 log 输出的值发生改变,页面显示却无变化时,我们可以使用 this.$ set() 方法进行渲染集合,此方法的语法如下:this.$ set(this.需要修改的集合,集合中需要修改项的下标,修改项的值)
通过此方法,集合中的参数发生变化时,页面也会进行同步渲染。
前端框架 VUE 开发问题总结
最新推荐文章于 2022-12-24 11:52:32 发布