前端vue几个实用小代码

我觉得冷门却很好用的方法（我要我觉得，不要你觉得~）

通过元素属性查出元素在list中的位置

可以省去循环list的优雅写法

// id 所要查找的元素id
// list 目标list
// index id在list中的角标，若不存在则返回 -1
this.index = this.list.findIndex(
	d => d.id === this.id
)

在JS中给list添加属性

这个可以用在点击过后切换样式之类的

this.$set(list[index], 'url', 'www.baidu.com')

foreach循环

this.dataSource.forEach((item, index) => {})
// 在里面用 this 会报错，需要在外面声明 let that = this
this.dataSource.forEach(function(item, index) {})

深复制list

这是个深坑，如果不用深复制，得到的新元素和旧元素是一个地址，修改一个全都变了。。。明明很简单的事我却摔了两次，希望萌新们注意这里。

// 深复制数组：
this.dataListcopy = [...this.dataList] // 感谢评论区大佬：有蛋的急冻鸟
this.dataListcopy = JSON.parse(JSON.stringify(this.dataList))
// 深复制对象：
this.obj = {...this.obj}

阻止页面原生事件

这个用在重写右键弹窗，点击事件之类的

event.preventDefault()

获取鼠标位置

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

var x = event.clientX
var y = event.clientY

获取屏幕宽高

var windowWidth = document.documentElement.clientWidth
var windowHeight = document.documentElement.clientHeight

在JS中拼接style

通过后台获取的数据来确定DIV的样式

<view :style="getStyle()"></view>

getStyle() {
	return 'width:' + this.width + 'rem;height:' + this.height + 'rem;'
}

补充上面这个需求，在HTML中获取data中数据

<view :style="[{ backgroundImage:'url(' + list[index] + ')' }]"></view>

转换时间格式

getTime (time) {
		// 在这个位置如果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 (中国标准时间)    酱紫
        let date = ''
        time ? (date = new Date(time)) : (date = new Date())
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        month >= 1 && month <= 9 ? (month = '0' + month) : ''
        day >= 0 && day <= 9 ? (day = '0' + day) : ''
        let timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
        return timer
      }

参考于NEW DATE()之参数传递

取出map中的某一属性组成list并求和

var arrValue = this.getArrayProperty(this.data)
var sumValue = eval(arrValue.join('+'))
var arrName = this.getArrayProperty(this.data, "name")

getArrayProperty (array, key) {
	var key = key || "value"
	var res = []
	if (array) {
		array.forEach(function(t) {
			res.push(t[key])
		})
	}
	return res
 }

按照list中某一属性给list排序

let map2 = this.sort(this.data)

// 从大到小
compar(array, key) {
      return array.sort(function (a, b) {
        var x = a[key]
        var y = b[key]
        return ((x > y) ? -1 : (x < y) ? 1 : 0)
      })
    },
// 从小到大
compar(array, key) {
      return array.sort(function (a, b) {
        var x = a[key]
        var y = b[key]
        return ((x < y) ? -1 : (x > y) ? 1 : 0)
      })
    },

这个方法和上个方法是在一个大佬在echarts图表里用到的，我觉得用处很广就整理下，这个排序的方法原本也想做成把key当作参数传进去，过两天有时间完善下

// 后来发现了Vue.js更简单的方法,从小到大
arr.sort((old,New)=>{
return old -New
})

参考于js中map中元素排序
未完待续。。。吧
如果有什么不足或者错误的地方还望大佬们多多指点~