🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付
1. この記事でやること
- 學習輸出，以 computed 顯示驗證
2. 檢驗環境
- Vue 3.4.35
- Nuxt 3.12.4
- Node v22.20.0
- Yarn 1.22.18
- macOS Sequoia 15.6
3. 結論
- 使用 computed 可以在輸入值時根據需要顯示相應的驗證
4. 代碼
SampleView.vue
<script setup>
import { computed, ref } from 'vue';
const content = ref('')
const isValid = computed(() => content.value.length >= 5)
const errorMessage = computed(() => {
if (content.value.length === 0) return ''
return (isValid.value ? '' : '請輸入 5 字以上')
})
</script>
<template>
<input v-model="content" type="text">
<p v-if="errorMessage">{{ errorMessage }}</p>
</template>
<style scoped>
p {
margin: 0;
color: red;
}
</style>- 當輸入少於 5 字時顯示錯誤，未輸入時則不顯示任何內容
5. 行為確認
原文出處：https://qiita.com/pomusuke36/items/90697508c14d8f2a5afe
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付