文章目录
1.VUE对象拷贝对象
vue中,如果多个组件引用了同一个对象作为数据,那么当其中一个组件改动对象数据时,其他对象的数据也会同步改动。有这种双向绑定的需要的话,那么自然是最好的,但如果不需要这种绑定而希望各组件的对象数据之间相互独立,即是互不关联的对象副本的话,可以用下面的方法解决
obj=JSON.parse(JSON.stringify(this.templateData));
2. element UI 表单校验例子 (小数点后只能输入四位 不能0+数字开头 等等诸多限制)
<el-form-item label="值" prop="forecastload">
<el-input v-model="form.load" oninput="
value=value.replace(/[^\d.]/g,'')
.replace(/^0\d+|^\./g, '')
.replace(/\.{2,}/g, '.')
.replace('.', '$#$')
.replace(/\./g,'')
.replace('$#$', '.')
.replace(/^(\d+)\.(\d\d\d\d).*$/, '$1.$2')" maxlength="10"
show-word-limit
placeholder="请输入">
<template slot="append">MW</template>
</el-input>
</el-form-item>
3. 页面刷新获取浏览器高度
watch: {
// 如果 `clientHeight` 发生改变,这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight)
}
},
mounted() {
// 获取浏览器可视区域高度
this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
},
methods: {
//动态设置画布地图高度
changeFixed(clientHeight) {
this.$refs.mapPage.style.height = clientHeight - 400 + 'px'
},
}
4. 自己放的值没有getter setter?这样放试试
this.$set(this.drawPolyArea, 'polygonPaths', [])
5. 去除数组元素
arr.pop() //最后一个
arr.shift() //第一个
arr.slice(2,4) //从第几个到第几个截取
arr.join(".") //转成字符串 用.连接
arr.toString() //转成字符串
6. Vue 页面加载完成钩子
this.$nextTick(()=>{
});
7. Element ui Table 加序号
<el-table-column fixed label="序号" width="50" align="center">
<template slot-scope="scope">
<span>{{ (scope.$index + 1) + (queryParams.pageSize * (queryParams.pageNum - 1)) }} </span>
</template>
</el-table-column>
8.vue Dom 与数据更新
Vue.js中this. n e x t T i c k ( ) 的 使 用 t h i s . nextTick()的使用 this. nextTick()的使用this.nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我们将打印输出的代码放在setTimeout(fn, 0)中;
9.删除json数组 id为1的元素
arr.splice(arr.findIndex(e => e.id === 1), 1)
10.把 Number 四舍五入为指定小数位数的数字
NumberObject.toFixed(num)
12.ES6 检查数组是否包含
arr.includes('a')