vue-js

最新推荐文章于 2024-11-19 11:51:49 发布

原创最新推荐文章于 2024-11-19 11:51:49 发布 · 169 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

小知识点

3 篇文章

订阅专栏

本文分享了前端开发中实用的技巧，包括页面样式设置、路由跳转与参数传递、URL参数获取、动态JSON数据解析等，旨在提升前端开发效率。

1、设置当前页面color

在mounted 里面写：

document.querySelector('body').setAttribute('style', 'background-color:#fff')

2、链接跳转及传参、接收参数

方法一：

this.$router.push({
                    path: '/group/groupDetail',
                    query: {
                        item_id: item.item_id,
                        
                    }
                });

this.$route.query.item_id;

方法二：

在style.js文件中先定义这个方法

//获取连接参数
    GetQueryString(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    },

使用：例如连接后面参数为 test_id

GetQueryString("test_id");

3、获取网页上的连接

window.location.href

4、如果页面没有上一层路由，直接返回首页

if (window.history.length <= 1) {
                    this.$router.push({path:'/home'})
                    return false
                } else {
                    this.$router.go(-1)
                }

5、解析动态json数据

取出key和value的值。再封装到一个数组里面。

let userData = res.data.data;
let userArray=[];
for (let [key, value] of Object.entries(userData)) {
  userArray.push({"时间":key,"人数":value});
  console.log(userArray)
}

只取key值：

for (let key of Object.keys(obj)) {
  
}

只取value值：

for (let value of Object.values(obj)) {
  
}