1、vue 路由 编程式导航
分为path和name两种方式。
1、path 传参 ：参数会带到url地址栏，刷新地址依然存在。
2、name 传参 ：参数不会带到url地址栏，刷新地址就没了。
3、path 需要加斜杠，name不需要加斜杆。
//path 传参
this.$router.push({
path: "/index",
query: {
id,
}
});
//path 传参 接收方式：
let Id = this.$route.query.id;
//name 传参
this.$router.push({
name: "index",
params: {
id,
}
});
//name 传参 接收方式：
let Id = this.$route.params.id;
2、把 /n 替换成 </br>
valuet.replace(/\r?\n/g,"<br/>")
3、随机取数组中的颜色
<i :style="'background-color:'+randomRgb()"></i>
data(){
return{
bgColor:["#8dffaa", "#f6d953", "#ef666a", "#6ed4f9", "#5589ff", "#c331c1"],
}
},
methods:{
randomRgb(){ //随机取数组中的颜色
let valueColor = this.bgColor;
let bGcolorRandom = valueColor[Math.floor((Math.random()*valueColor.length))];
return bGcolorRandom;
}
}
4、判断是电脑还是手机
data(){
return{
}
},
methods:{
isMobile() { //判断是不是手机端
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag;
},
},
mounted() {
if (this.isMobile()) { //手机端
} else {//pc端
}
}
5、判断是苹果手机还是安卓手机
data(){
return{
}
},
methods:{
isMobile() {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
let isAndroid = isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
if(isiOS){
return false; //ios
}else if(isAndroid){
return true; //android
}
}
},
mounted() {
if (this.isMobile()) {
//android
} else {
//ios
}
}
6、vue 过滤器 传多个值
<div>
{{item.StartTime | timeFilters(item.EndTime)}}
</div>
<script>
filters: {//过滤器 接收多个值
timeFilters(startTime,endTime){
console.log('startTime,endTime',startTime,endTime)
}
},
</script>
7、将时间戳转换成 YYYY-MM-DD HH:MM:SS 的格式
传入 1631866873000 得到 2021-09-17 16:21:13
<div>
<p>{{item.StartTime | timeFilters}}</p>
<p>{{item.EndTime | timeFilters}}</p>
</div>
<script>
const padDate = function (value) {
return value < 10 ? `0${value}` : value;
};
export default {
filters: {//过滤器 过滤时间
timeFilters: function (value) {
const date = new Date(value);
const year = date.getFullYear();
const month = padDate(date.getMonth() + 1);
const day = padDate(date.getDate());
const hours = padDate(date.getHours());
const minutes = padDate(date.getMinutes());
const seconds = padDate(date.getSeconds());
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
},
}
</script>
8、截图url地址上面的参数
<script>
export default {
data() {
return {};
},
methods: {
urlValue(url) {
var urlObj = new Object();
if (url.indexOf("?") != -1) {
var urlSplit = url.split("?")[1];
var str = urlSplit.substr(0); //substr()方法返回从参数值开始到结束的字符串；
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
urlObj[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
console.log("url", urlObj); //此时的urlObj就是需要的参数；
this.urlPath = urlObj;
}
},
},
mounted() {
this.urlValue(window.location.href)
}
};
</script>
效果：
image.png
9、截取url地址 有中文的情况
function getRequest() {
var url = window.location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
console.log(getRequest())
image.png
10、判断是否在微信打开
data(){
return{
}
},
methods:{
is_weixn(){
let ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; }
},
}
},
mounted() {
if (this.is_weixn()) {
//在微信中打开
} else {
//不是在微信中打开
}
}
11、复制
<span @click="copy('参数')">复制</span>
copy(data) {
//创建一个input元素
let input = document.createElement('input')
//给input的内容复制
input.value = data
// 在body里面插入这个元素
document.body.appendChild(input)
// 选中input里面内容
input.select()
//执行document里面的复制方法
document.execCommand("Copy")
// 复制之后移除这个元素
document.body.removeChild(input)
this.$message({
type: 'success',
message: '复制成功，请在浏览器打开'
});
},
12、转千分位格式。保留或不保留小数
效果：
image.png
不保留小数
toMoney(num) { //转千分位格式 不保留小数
if (num && num != 'error') {
num = parseFloat(num).toFixed(0);
num = parseFloat(num);
num = num.toLocaleString();
return num;
} else {
return '0';
}
},
保留小数后两位
toMoney(num) { //转千分位格式 ，保留小数后两位
if (num && num != 'error') {
num = num.toString();//首先数字转字符串，才能检测是否包含小数点
if (num.indexOf(".") == -1) { //等于-1表示 没有小数点
num = parseFloat(num);
num = num.toLocaleString();
return num +'.00'; //没有小数点，就拼接小数点
}else{ //有小数点，直接转千分位
num = parseFloat(num).toFixed(2);//保留两位小数点
num = parseFloat(num);
num = num.toLocaleString();
return num;
}
} else {
return '0';
}
},
13、保留小数点 和 以逗号分割成数组
toFloat(num) { //保留小数点后两位
num = parseFloat(num).toFixed(2);
return num;
},
splitArr(value) { //以逗号分割成数组
if (value) {
var newValue = []
newValue.push(value.split(','))
return newValue[0]
} else {
return ''
}
},
14、iOS手机上input输入框无光标，不能输入文字。
看看自己的样式中 ，有没有这段代码，有的话 就去掉。
或者 把-webkit-user-select的值设置成auto即可解决。
- {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;/文本不能被选择/
}
15、根据长数组将短数组补齐
<script>
let arrA = [{ index: 1 }, { index: 2 }, { index: 3 }, { index: 4 },{ index: 5 },{ index: 6 },{ index: 7 }];
let arrB = [{ index: 1 }, { index: 2 }, { index: 3 }];
if (arrA.length > arrB.length) {
for (let i = 0; i < arrA.length; i++) {
if (!arrB[i]) {
arrA[i] = {};
}
}
}
console.log("arrA", arrA);
</script>
image.png
网友评论