限时抢购：

1. 在数据中心设置四个变量 counh(小时) counm(分钟) couns(秒) seconds(俩小时总秒数) 来制作倒计时

   

     2.在methods方法中心定义一个方法 计算seconds等于多少秒 分 时 将其赋给对应的数据  并定义一个方法为定时器每一秒从seconds -1

  3.在钩子函数mounted中重复调动time函数

   4.tab栏切换 在数据中心定义一个num为空值接收数据 并给方法中心定义一个方法获取传过来的值 并赋给num

htm:

 <div id="app">
      <div class="mian">
        <div class="nav">
          <ul>
            <li>
              <span class="big">限时抢购</span><span>距离下场 </span
              ><span class="time"
                ><span>{{counh}}</span>:<span>{{counm}}</span>:<span
                  >{{couns}}</span
                ></span
              >
              <span class="tf" :class="{active:num == 1}" @mouseover="num=1"
                ><a href="">14:00即将开抢</a></span
              >
              <span class="tf" @mouseover="num=2" :class="{active:num == 2}"
                ><a href="">18:00即将开抢</a></span
              >
              <span class="tf" :class="{active:num == 3}" @mouseover="num=3"
                ><a href="">20:00即将开抢</a></span
              >
              <span><a href="" class="tg">更多抢购 ></a></span>
            </li>
          </ul>
        </div>
        <div class="conent-box" :class="{cur:num === 1}">
          <ul class="contert">
            <li v-for="(item,index) in list" :key="item.indxe">
              <a href=""><img :src="item.imgSrc" alt="" /></a>
              <div class="title">{{item.name}}</div>
              <div class="price">
                <span>{{item.price|upper}}</span
                ><span>{{item.price2|upper}}</span>
              </div>
            </li>
            <li>
              <img src="img/6.jpg" alt="" />
            </li>
          </ul>
        </div>
        <div class="conent-box" :class="{cur:num === 2}">
          <ul class="contert">
            <li v-for="(item,index) in list2" :key="item.indxe">
              <a href=""><img :src="item.imgSrc" alt="" /></a>
              <div class="title">{{item.name}}</div>
              <div class="price">
                <span>{{item.price|upper}}</span
                ><span>{{item.price2|upper}}</span>
              </div>
            </li>
            <li>
              <img src="img/6.jpg" alt="" />
            </li>
          </ul>
        </div>
        <div class="conent-box" :class="{cur:num === 3 }">
          <ul class="contert">
            <li v-for="(item,index) in list3" :key="item.indxe">
              <a href=""><img :src="item.imgSrc" alt="" /></a>
              <div class="title">{{item.name}}</div>
              <div class="price">
                <span>{{item.price|upper}}</span><span>{{item.price2|}}</span>
              </div>
            </li>
            <li>
              <img src="img/6.jpg" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>

javascript:

<script src="../index.vue/vue.js"></script>
<script>
  Vue.filter("upper", function (val) {
    return "￥" + val;
  });
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        counh: "",
        counm: "",
        couns: "",
        seconds: 7200, // 两小时秒
        num: "",
        list: [
          {
            imgSrc: "img/1-1.jpg",
            name: "乐心(LIFESENSE) MAM",
            price: 79,
            price2: 119,
          },
          {
            imgSrc: "img/1-2.jpg",
            name: "达利园 糕点 面包",
            price: 100,
            price2: 170,
          },
          {
            imgSrc: "img/1-3.jpg",
            name: "美的 1.5匹变频空调",
            price: 50,
            price2: 80,
          },
          {
            imgSrc: "img/1-4.jpg",
            name: "黑土小镇小米1.25kg",
            price: 168,
            price2: 229,
          },
          {
            imgSrc: "img/1-5.jpg",
            price: 58,
            price2: 88,
            name: "耐克(NIKE)",
          },
        ],
        list2: [
          {
            imgSrc: "img/2-1.jpg",
            price: 79,
            price2: 119,
            name: "两瓶套餐：送棉签/口罩",
          },
          {
            imgSrc: "img/2-2.jpg",
            price: 100,
            price2: 170,
            name: "喜力啤酒",
          },
          {
            imgSrc: "img/2-3.jpg",
            price: 50,
            price2: 80,
            name: "海澜之家简约短袖",
          },
          {
            imgSrc: "img/2-4.jpg",
            price: 168,
            price2: 229,
            name: "逸飞 菜籽油",
          },
          {
            imgSrc: "img/2-5.jpg",
            price: 58,
            price2: 88,
            name: "酸辣鲜粉(190g)",
          },
        ],
        list3: [
          {
            imgSrc: "img/3-1.jpg",
            price: 79,
            price2: 119,
            name: "依能加锌苏打水",
          },
          {
            imgSrc: "img/3-2.jpg",
            price: 100,
            price2: 170,
            name: "爱自由t-26麦饭石",
          },
          {
            imgSrc: "img/3-3.jpg",
            price: 50,
            price2: 80,
            name: "[中华特色] 六安 农家",
          },
          {
            imgSrc: "img/3-4.jpg",
            price: 168,
            price2: 229,
            name: "亲臣一品超薄",
          },
          {
            imgSrc: "img/3-5.jpg",
            price: 58,
            price2: 88,
            name: "塑料积木大颗粒",
          },
        ],
      };
    },
    mounted() {
      this.Time();
    },
    methods: {
      countDown() {
        let h = parseInt((this.seconds / (60 * 60)) % 24);
        h = h < 10 ? "0" + h : h;
        let m = parseInt((this.seconds / 60) % 60);
        m = m < 10 ? "0" + m : m;
        let s = parseInt(this.seconds % 60);
        s = s < 10 ? "0" + s : s;
        this.counh = h;
        this.counm = m;
        this.couns = s;
      },
      //定时器没过1秒参数减1
      Time() {
        setInterval(() => {
          this.seconds -= 1;
          this.countDown();
        }, 1000);
      },
      next(index) {
        this.num = index;
      },
    },
  });
</script>