VUE 开发知识个人记录

拼搏现实的明天。 2024-03-24 23:05 80阅读 0赞

【前言】：本博客是经过本人实际验证后记录下来的一些有效的固定写法，便于后续自己直接拷贝粘贴，提高开发效率

1、div 设置宽度自适应文本内容：设置 div 节点的 class 为下面 auto-adjust-text-width

.auto-adjust-text-width {
      display: inline-block;
      white-space: nowrap;
    }

2、使 div 节点具有上下或左右滑动的能力：style="overflow-y: scroll;" 或 style="overflow-x: scroll;"

3、设置宽高或边距：可以用 calc 计算方式，注意：如果直接用百分比表示的话，比如100%，那这是相对于父布局的比值，如果要相对于根布局，那就用vh或者vw，全屏宽度是固定的100vw，全屏高度是固定的100vh，25vw则表示相对于根布局宽度的25%，30vh则表示相对于根布局高度的30%，如果父布局就是根布局，那这两种单位就是等效的

width: calc((100% - 2px) / 2);
    height: calc((20vh + 24px) * 2);

4、vue 退回到上一个界面

this.$router.go(-1);
    //或者
    this.$router.back();

5、数据集合过滤

thisw.filterDataList = this.dataList.filter(item => item.isChoosed);

6、数据对象取值

6.1、明确知道 key 的名称如 name，那就可以直接获取：object.name

例如：let object = \{ name1: 'AAA', name2: 'BBB'\};

则获取 object.name1 的值就是 ‘AAA’  
6.2、key 的名称是个变量如var key，具体是啥不明确，那可以通过object\[key\] 获取

例如：let object = \{ name1: 'AAA', name2: 'BBB'\};

var key = 'name1';

则获取 object\[key\] 的值就是 ‘AAA’

7、日期相关操作

//获取过去某一天的日期
    getPastDate() {
        var currentDate = (new Date()).getTime();
        var tenYear = 10 * 365 * 24 * 60 * 60 * 1000;//10年前，每年按365天计算
        var pastResult = currentDate - tenYear ;
        var beginDate = new Date(pastResult);
        return beginDate;
    }
    
    //获取当前日期
    getCurrentDate() {
        return new Date();
    }
    
    //日期转为字串
    dateToString(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month >= 1 && month <= 9) {
            month = '0' + month;
        }
        if (day >= 0 && day <= 9) {
            day = '0' + day;
        }
        var dateString = year + '-' + month + '-' + day;
        return dateString;
    }
    
    //字串转为日期
    stringToDate(dateString) {
        return new Date(dateString);
    }

8、渐变色设置：background-image: linear-gradient(180deg, \#44D09B 0%, \#009688 100%);