Vue3案例详解(六)

系列文章目录

在此之前你可以先学习另外几篇介绍:

Vue3案例详解(一)_flame.liu的博客-CSDN博客

Vue3案例详解(二)_flame.liu的博客-CSDN博客

Vue3案例详解(三)_flame.liu的博客-CSDN博客

Vue3案例详解(四)_flame.liu的博客-CSDN博客

Vue3案例详解(五)_flame.liu的博客-CSDN博客

---

本文目录

系列文章目录

概要

主要代码:

---

概要

此篇文章编写于2023年7月6日.如果查阅时间太久请注意版本的迭代.

本文主要介绍computed计算属性,以及相关语法的简写形式,例如()=>{},简化了官方案例,读起来会更加容易.

所有内容都结合代码由详细的解释.编译工具用的是VSCode,建议拷贝到编译器进行学习.

---

主要代码:

<script setup>
import { ref, computed } from 'vue'

//航班类型,1:单程,2:往返
const flightType = ref('1')
//出发日期
const departureDate = ref(dateToString(new Date()))
//返程日期默认就是出发日期
const returnDate = ref(departureDate.value)
/**
 * isReturn是否需要返程,这个变量的值根据另外一个变量计算得出,需要跟随flightType的变化而变化,所以使用计算属性
 * () => flightType.value === '2'是简写形式,完整形式应该是:
 * ()=>{ return flightType.vALUE==='2';}
 * 简写形式省略了大括号和return
 * 
 * === 三个等号表示不仅数值相等,数据类型也相等.
 */
const isReturn = computed(() => flightType.value === '2')
/**
 * 是否可以订购机票
 * canBook根据是否需要返程,如果需要返程,那么返程日期是否晚于启程日期来进行计算.所以也是定义的计算属性.
 */
const canBook = computed(
  () =>{
    if(isReturn.value==true){//需要返程
        if(returnDate.value>departureDate.value){
            return true;//返程时间晚于启程时间,可以订票
        }else{
            return false;//返程时间早于启程时间,不可以订票
        }
    }else{
        return true;//如果不需要返程,那么订票默认可以使用
    }
  }
    // !isReturn.value ||
    // stringToDate(returnDate.value) > stringToDate(departureDate.value)
)

function book() {
  alert(
    isReturn.value
      ? `你定了 ${departureDate.value} 的启程机票,还有 ${returnDate.value} 的返程机票.`
      : `你定了 ${departureDate.value} 的单程机票.`
  )
}

// function stringToDate(str) {
//   const [y, m, d] = str.split('-')
//   console.log(y+"-"+m+"-"+d);
//   console.log(new Date(+y, m - 1, +d).toString())
//   return new Date(+y, m - 1, +d)
// }

function dateToString(date) {
  return (
    date.getFullYear() +
    '-' +
    pad(date.getMonth() + 1) +//月份的编号从0开始,所以要加1
    '-' +
    pad(date.getDate())
  )
}
/**
 * 月份或者日期如果是一位数,那么在前面补0,其中${s}相当于字符串中的占位符,由s的值添加进去.
 * @param {*} n 接收月或者日的数字
 * @param {*} s 将n转换为字符串
 */
function pad(n, s = String(n)) {
  return s.length < 2 ? `0${s}` : s
}
</script>

<template>
  <select v-model="flightType">
    <option value="1">单程</option>
    <option value="2">往返</option>
  </select>

  <input type="date" v-model="departureDate">
  <input type="date" v-model="returnDate" :disabled="!isReturn">

  <button :disabled="!canBook" @click="book">Book</button>

  <p>{{ canBook ? '' : '返程时间必须晚于启程时间.' }}</p>
</template>

<style>
select,
input,
button {
  display: block;
  margin: 0.5em 0;
  font-size: 15px;
}

input[disabled] {
  color: #999;
}

p {
  color: red;
}
</style>