{"id":468,"date":"2025-12-05T10:15:06","date_gmt":"2025-12-05T02:15:06","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=468"},"modified":"2025-12-05T10:16:23","modified_gmt":"2025-12-05T02:16:23","slug":"%e5%88%a9%e7%94%a8vue3%e7%bc%96%e5%86%99%e4%b8%80%e4%b8%aa%e6%9c%89%e8%b6%a3%e7%9a%84%e7%89%9b%e9%a9%ac%e6%97%b6%e9%92%9f%e5%b9%b6%e9%9b%86%e6%88%90%e5%88%b0%e5%b0%8f%e7%a8%8b%e5%ba%8f","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/%e5%88%a9%e7%94%a8vue3%e7%bc%96%e5%86%99%e4%b8%80%e4%b8%aa%e6%9c%89%e8%b6%a3%e7%9a%84%e7%89%9b%e9%a9%ac%e6%97%b6%e9%92%9f%e5%b9%b6%e9%9b%86%e6%88%90%e5%88%b0%e5%b0%8f%e7%a8%8b%e5%ba%8f\/","title":{"rendered":"\u5229\u7528vue3\u7f16\u5199\u4e00\u4e2a\u6709\u8da3\u7684\u725b\u9a6c\u65f6\u949f\u5e76\u96c6\u6210\u5230\u5c0f\u7a0b\u5e8f"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a\u53ef\u76f4\u63a5\u8fd0\u884c\u7684 Vue3 \u7248\u201c\u725b\u9a6c\u65f6\u949f\uff08\u5de5\u65f6\u5012\u8ba1\u65f6 + \u8da3\u5473\u6587\u6848\uff09\u201d<\/strong>\uff0c\u7136\u540e\u544a\u8bc9\u4f60\u5982\u4f55\u65e0\u7f1d\u96c6\u6210\u5230\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff08mpvue \/ uni-app \/ taro \/ \u539f\u751f\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5957\u58f3\uff09<\/strong>\u3002<\/p>\n\n\n\n

\u4f60\u53ef\u4ee5\u76f4\u63a5\u590d\u5236\u4f7f\u7528\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83c\udfaf \u529f\u80fd\u8bf4\u660e\uff1a\u725b\u9a6c\u65f6\u949f\uff08Vue3 \u7248\u672c\uff09<\/h1>\n\n\n\n
    \n
  • \u663e\u793a\u5f53\u524d\u65f6\u95f4<\/li>\n\n\n\n
  • \u663e\u793a\u201c\u4e0a\u73ed\u8fd8\u5269\u591a\u4e45\/\u4e0b\u73ed\u5012\u8ba1\u65f6\u201d<\/li>\n\n\n\n
  • \u52a8\u6001\u968f\u673a\u201c\u725b\u9a6c\u8bed\u5f55\u201d<\/li>\n\n\n\n
  • \u652f\u6301\u5c0f\u7a0b\u5e8f\u7aef\u8fd0\u884c<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n

    \ud83d\ude80 \u4e00\u3001Vue3 \u5b8c\u6574\u7248\u672c\uff08\u53ef\u76f4\u63a5\u8dd1\uff09<\/h1>\n\n\n\n

    1\uff09CowHorseClock.vue<\/code><\/h2>\n\n\n
    \n&lt;template>\n  &lt;div class="clock-wrapper">\n    &lt;h2 class="title">\ud83d\udc2e\ud83d\udc34 \u725b\u9a6c\u65f6\u949f&lt;\/h2>\n\n    &lt;div class="time">{{ currentTime }}&lt;\/div>\n\n    &lt;div class="status">\n      &lt;p v-if="isWorking">\ud83d\udcbc \u8ddd\u79bb\u4e0b\u73ed\u8fd8\u6709\uff1a{{ timeToOff }}&lt;\/p>\n      &lt;p v-else>\ud83c\udf89 \u8ddd\u79bb\u4e0a\u73ed\u8fd8\u6709\uff1a{{ timeToWork }}&lt;\/p>\n    &lt;\/div>\n\n    &lt;div class="quote">\u201c{{ quote }}\u201d&lt;\/div>\n  &lt;\/div>\n&lt;\/template>\n\n&lt;script setup>\nimport { ref, onMounted, onUnmounted } from "vue";\n\nconst currentTime = ref("");\nconst timeToOff = ref("");\nconst timeToWork = ref("");\nconst isWorking = ref(false);\n\nconst quotes = [\n  "\u4e0a\u73ed\u8fd9\u4ef6\u4e8b\uff0c\u53ea\u8981\u4e0d\u53bb\uff0c\u5c31\u4e0d\u4f1a\u53d1\u751f\u3002",\n  "\u6253\u5de5\u4eba\u6253\u5de5\u9b42\uff0c\u6253\u5de5\u90fd\u662f\u4eba\u4e0a\u4eba\u3002",\n  "\u5de5\u8d44\u5c31\u50cf\u6708\u7ecf\uff0c\u4e00\u4e2a\u6708\u4e00\u6b21\uff0c\u4e00\u5468\u5c31\u6ca1\u3002",\n  "\u4e0b\u73ed\uff0c\u662f\u6253\u5de5\u4eba\u6700\u540e\u7684\u5014\u5f3a\u3002",\n  "\u6211\u4e0d\u662f\u5728\u4e0a\u73ed\uff0c\u5c31\u662f\u5728\u53bb\u4e0a\u73ed\u7684\u8def\u4e0a\u3002",\n];\n\nconst quote = ref(quotes[Math.floor(Math.random() * quotes.length)]);\n\nfunction updateClock() {\n  const now = new Date();\n  currentTime.value = now.toLocaleTimeString();\n\n  const workStart = new Date(now);\n  workStart.setHours(9, 0, 0);\n\n  const workEnd = new Date(now);\n  workEnd.setHours(18, 0, 0);\n\n  if (now >= workStart &amp;&amp; now &lt; workEnd) {\n    isWorking.value = true;\n    timeToOff.value = formatTime(workEnd - now);\n  } else {\n    isWorking.value = false;\n    let nextWork = new Date(now);\n    if (now &lt; workStart) {\n      nextWork = workStart;\n    } else {\n      nextWork.setDate(now.getDate() + 1);\n      nextWork.setHours(9, 0, 0);\n    }\n    timeToWork.value = formatTime(nextWork - now);\n  }\n}\n\nfunction formatTime(ms) {\n  let s = Math.floor(ms \/ 1000);\n  const h = Math.floor(s \/ 3600);\n  s %= 3600;\n  const m = Math.floor(s \/ 60);\n  s %= 60;\n  return `${h}\u5c0f\u65f6 ${m}\u5206 ${s}\u79d2`;\n}\n\nlet timer;\nonMounted(() => {\n  updateClock();\n  timer = setInterval(updateClock, 1000);\n});\n\nonUnmounted(() => clearInterval(timer));\n&lt;\/script>\n\n&lt;style scoped>\n.clock-wrapper {\n  text-align: center;\n  padding: 20px;\n  font-family: "Arial";\n}\n\n.title {\n  font-size: 26px;\n  margin-bottom: 20px;\n}\n\n.time {\n  font-size: 32px;\n  margin: 10px 0;\n}\n\n.status {\n  font-size: 20px;\n  margin: 15px 0;\n}\n\n.quote {\n  margin-top: 20px;\n  font-size: 18px;\n  color: #666;\n  font-style: italic;\n}\n&lt;\/style>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\ude80 \u4e8c\u3001\u5982\u4f55\u96c6\u6210\u5230\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff1f<\/h1>\n\n\n\n
    \u4f60\u6709 4 \u79cd\u9009\u62e9\uff0c\u6211\u7ed9\u4f60\u6700\u7b80\u5355\u548c\u6700\u63a8\u8350\u7684\uff1a<\/p>\n\n\n\n
    \n\n\n\n
    \u2705 \u65b9\u6848 1\uff1a\u4f7f\u7528 uni-app\uff08\u63a8\u8350\uff0c0 \u6539\u52a8\uff09<\/strong><\/h1>\n\n\n\n
    Vue3 \u4ee3\u7801\u51e0\u4e4e \u4e0d\u7528\u6539<\/strong>\uff0c\u76f4\u63a5\u8fc1\u79fb\uff1a<\/p>\n\n\n\n
    1\uff09HBuilderX \u5bfc\u5165\u9879\u76ee<\/h3>\n\n\n\n
    \u628a\u4e0a\u8ff0\u7ec4\u4ef6\u653e\u8fdb\uff1a<\/p>\n\n\n
    \n\/components\/CowHorseClock.vue\n\n<\/pre><\/div>\n\n\n
    2\uff09\u5728\u9875\u9762\u4e2d\u4f7f\u7528<\/h3>\n\n\n
    \n&lt;template>\n  &lt;view>\n    &lt;CowHorseClock \/>\n  &lt;\/view>\n&lt;\/template>\n\n&lt;script setup>\nimport CowHorseClock from "@\/components\/CowHorseClock.vue";\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    3\uff09\u70b9\u51fb\u8fd0\u884c \u2192 \u201c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u201d<\/h3>\n\n\n\n
    uni-app \u4f1a\u81ea\u52a8\u8f6c\u6210\u5c0f\u7a0b\u5e8f\u8bed\u6cd5\u3002<\/p>\n\n\n\n
    \u2714 Vue3
    \u2714 Composition API
    \u2714 \u9875\u9762\u3001\u6837\u5f0f\u5168\u90e8\u517c\u5bb9<\/p>\n\n\n\n
    \u8fd9\u662f\u6700\u8f7b\u677e\u7684\u65b9\u5f0f\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u2705 \u65b9\u6848 2\uff1a\u4f7f\u7528 Taro\uff08Vue3 \u6a21\u5f0f\uff09<\/strong><\/h1>\n\n\n\n
    \u540c\u6837\u51e0\u4e4e\u4e0d\u7528\u6539\u3002<\/p>\n\n\n\n
    \u5b89\u88c5\uff1a<\/p>\n\n\n
    \ntaro init cowhorse-clock\n\u9009\u62e9 Vue3\n\n<\/pre><\/div>\n\n\n
    \u628a CowHorseClock.vue<\/code> \u653e\u5230 src\/components\/<\/code><\/p>\n\n\n\n
    \u56e0\u4e3a taro \u4e0e\u5c0f\u7a0b\u5e8f\u6807\u7b7e\u7c7b\u4f3c\uff0c\u4f46\u652f\u6301 Vue3\uff0c\u6240\u4ee5\u517c\u5bb9\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u26a0\ufe0f \u539f\u751f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff08\u4e0d\u63a8\u8350\u76f4\u63a5\u4e0a Vue3\uff09<\/h1>\n\n\n\n
    \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u672c\u8eab\u4e0d\u652f\u6301 Vue\uff0c\u5b98\u65b9\u6846\u67b6\u662f WXML\u3002<\/p>\n\n\n\n
    \u5982\u679c\u4f60\u4e00\u5b9a\u8981\u539f\u751f\u5c0f\u7a0b\u5e8f\u7528\u5b83\uff0c\u5fc5\u987b\u501f\u52a9 Kbone \/ WeChat Miniprogram WebView<\/strong> \u8fd9\u6837\uff1a<\/p>\n\n\n\n
    \u539f\u7406\uff1a<\/h3>\n\n\n\n