学习日记——Vue2作业的知识点（时间、文字渐变、Tab栏切换、v-show、子传父$emit 、滚动条样式）

杨白鹤

已于 2022-12-08 09:06:56 修改

阅读量551

点赞数

文章标签：学习 javascript 前端 vue

于 2022-12-07 14:02:50 首次发布

本文链接：https://blog.csdn.net/weixin_59820248/article/details/128188089

版权

这篇博客详细记录了Vue2学习过程中的知识点，包括获取实时时间、农历日期的实现，CSS文字渐变效果，使用v-show和v-if进行Tab栏内容切换，以及利用v-show和$emit实现父子组件间的交互。此外，还介绍了如何自定义滚动条样式。

摘要由CSDN通过智能技术生成

小白学习日记——Vue2作业中的知识点合集

<template>
  <div id="app">
    <span>农历时间是：{
   {
    getLunarDay.lunarYear }}{
   {
    getLunarDay.dateStr }} </span> <br />
    <span>日期是：{
   {
    getDay }}</span>
    <br />
    <span>时间是：{
   {
    getTime }}</span>
  </div>
</template>
<script>
import {
    getLunar } from "chinese-lunar-calendar";
export default {
   
  data() {
   
    return {
   
      getLunarDay: "", // 农历日期
      getTime: "", // 时间
      getDay: "", // 日期
      timer: "", // 定时器
    };
  },
  methods: {
   
    getDataTime() {
   
      let date = new Date();
      let yy = date.getFullYear(); // 年
      let mm =
        date.getMonth() + 1 < 10
          ? "0" + date.getMonth() + 1
          : date.getMonth() + 1; // 月
      let dd = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ]; // 星期
      let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //小时
      let ff =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //分钟
      this.getLunarDay = getLunar(yy, mm, dd); //转化成农历日期
      this.getTime = hh + ":" + ff; // 时间
      this.getDay = yy + "/" + mm + "/" + dd + "/" + weekArr[week]; //日期
    },
  },
  mounted() {
   
    this.getDataTime();
    let _this = this;
    this.timer = setInterval(() => {
   
      _this.