前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及Javascript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
1、js如何获取数组的key
functiongetObjectKeys(object){
varkeys=[];
for(varpropertyinobject)
returnproperty;
}
console.log(getObjectKeys(3332:[]))//3332
2、如何过滤数组中的空数据
Array.prototype.notempty=function(){
vararr=[];
this.map(function(val,index){
if(val!==""&&val!=undefined){
arr.push(val);
}
});
returnarr;
}
this.selectHouse=this.selectHouse.notempty()
3、iviewcheckboxGroup动态删除某个值后,页面checkBox选中状态错乱。
具体情况如下:
需求:
checkboxGroupv-for生成三个checkbox,默认勾选。当我点击某个checkbox默认取消勾选并且删除该checkbox。
操作方法一:
从最后一个开始删,也就是删除默认绑定的model数组中的最后一个值,这时候剩余checkbox的选中状态是正常的。
操作方法二:
但是如果从中间开始删,比如删除第二,那么第二个checkbox会被删除,但是第三个checkbox的选中状态样式没有了,model数据还是在的。
解决方法一:
我们在删除model数据后,更新数据的时候用this.$nextTick进行数据更新
解决办法二:
v-for的时候key的取值不取index而取实际的value值
延伸:
v-for在更新已渲染的元素列表的时候,采用就地复用策略,如果列表的数据发生变化,那么它会根据key值取判断值是否修改,如果修改则重新渲染这一项,否则则复用之前的数据。但是如果我们用index下标来作为key,那么在上面的例子中,我们删除了第二个数据,数据由三条变成了两条,列表重新渲染,而原本第三个checkbox的key是2,由于model数据长度由3变成了2。第三个checkbox的key由2变成了1导致重新赋值渲染。所以就导致实际值存在,但选中状态缺消失了的问题。
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。