前端vue几个实用小代码

前端VUE小技巧
通过元素属性查出元素在list中的位置
在JS中给list添加属性
深复制list
阻止页面原生事件
获取鼠标位置
在JS中拼接style
转换时间格式

我觉得冷门却很好用的方法（我要我觉得，不要你觉得~）
通过元素属性查出元素在list中的位置
可以省去循环list的优雅写法

this.index = this.list.findIndex(
d => d.id === this.id
)
1
2
3
在JS中给list添加属性
这个可以用在点击过后切换样式之类的

this.$set(list[index], ‘url’, ‘www.baidu.com’)
1
深复制list
这是个深坑，如果不用深复制，得到的新元素和旧元素是一个地址，修改一个全都变了。。。明明很简单的事我却摔了两次，希望萌新们注意这里

this.dataListcopy = JSON.parse(JSON.stringify(this.dataList))
1
阻止页面原生事件
这个用在重写右键弹窗，点击事件之类的

event.preventDefault()
1
获取鼠标位置
获取鼠标位置，跟上面的方法配套重写右键弹窗的，确定弹窗开启位置

var x = event.clientX
var y = event.clientY
1
2
在JS中拼接style
通过后台获取的数据来确定DIV的样式

1
getStyle() {
return ‘width:’ + this.width + ‘rem;height:’ + this.height + ‘rem;’
1
2
补充上面这个需求，在HTML中获取data中数据

:style="[{ backgroundImage:‘url(’ + list[index] + ‘)’ }]"
1
转换时间格式
getTime:function(){
var date = new Date(),
// 在这个位置如果new Date()参数为空是获取当前时间
// 也可以传个时间来转个格式
// 1、new Date(“month dd,yyyy hh:mm:ss”);
// 2、new Date(“month dd,yyyy”);
// 3、new Date(yyyy,mth,dd,hh,mm,ss); 注意：这种方式下，必须传递整型；
// 4、new Date(yyyy,mth,dd);
// 5、new Date(ms); 注意：ms:是需要创建的时间和 GMT时间1970年1月1日之间相差的毫秒数；当前时间与GMT1970.1.1之间的毫秒数：var mills = new Date().getTime();
// date是标准时间格式：Fri Jun 02 2017 12:00:00 GMT+0800 (中国标准时间) 酱紫

	year = date.getFullYear(),
	month = date.getMonth() + 1,
	day = date.getDate(),
	hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
	minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
	second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	day >= 0 && day <= 9 ? (day = "0" + day) : "";
	var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
	return timer
}