草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉
來介紹一下這一篇你會學到的三個html 擴充屬性：
- v-show ：這是Vue.js特有的寫法，基本上就是等於v-if，所以屬性值就是所謂的運算條件了。
- v-if ：同v-show，唯一差別是v-show只是用css dispaly:none來隱藏，但v-if是真的會移除
- v-else ： 這是當v-show或v-if條件不成立時需要選擇的答案
不知道到目前為止大家覺得Vue.js好不好學？如果要打個分數，1~10分你會打幾分？我們假設6分才及格，所以當你打6分以上，畫面會出現Vue.js so easy，如果不到6分，畫面上就會出現still learning Vue.js。好了！題目出來了，稍微思考一下大概要怎麼做吧！在程式開發的過程中，其實最難的部分是思考，思考如何把程式寫出來，還要考量架構、效能等等，這才是我覺得最難的地方，所幸題目是我出的，所以很簡單，你有想好一個大概了嗎？讓我們繼續看下去！
第一步當然是運用上一篇所學，先建立一個可以即時打分數的頁面，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2 v-show</title>
</head>
<body>
<div id="app">
<h1 class="error">{{ score }}分</h1>
<p>你覺得vue.js簡單嗎？請輸入1~10分</p>
<input type="text" v-model="score">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
score:''
}
});
</script>
</body>
</html>好了！如果你執行上面的code，你會發現你已經完成一個簡單、可以即時顯示分數的頁面，只是第一行很奇怪，會一直掛個分在那邊，如果你輸入了1，它就變成1分，那就合理了，所以你可以帶入score的預設值是0，這樣就會顯示0分，看起來就會合理多了！
第二步就是，如果score分數超過6分就要顯示“Vue.js so easy”，但不足6分就要顯示“still learning Vue.js”，這部分要怎麼寫呢？那當然就要用到v-show與v-else了，以下就是範例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2 v-show</title>
</head>
<body>
<div id="app">
<h1 class="error">{{ score }}分</h1>
<div v-show="score">
<p v-if="score >= 6">Vue.js so easy</p>
<p v-else>still learning Vue.js</p>
</div>
<p>你覺得vue.js簡單嗎？請輸入1~10分</p>
<input type="text" v-model="score">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
score:'0'
}
});
</script>
</body>
</html>上面的範例程式碼，我加上了score預設值是0，然後當score是有值的，就會根據目前輸入的分數去做判斷，判斷內容就是大於等於6分以上就會顯示“Vue.js so easy”，不足6分就會顯示“still learning Vue.js”，當然你也可以把條件是改成大於5分，結果會是一樣的，當然你把所有的v-show都改成v-if，結果還是會一樣的。當然我們也把我們最後的code上放jsfiddle：
當然這個題目還可以繼續延伸下去，比方說當輸入文字超過10時會出現警告訊息，而當score的參數值不存在時也會顯示不一樣的文字，各位可以自行增加一些條件來做延伸練習。
另外，值得一提的是在Vue 2.1版本加入了另外一個html屬性，也是屬於if else家族的，那就是“v-else-if”，用法其實跟else差不多，所以當你有很多else的時候，除了最後一個可以寫v-else以外，從倒數第二個以上的else都可以寫成v-else-if，各位也可以自行試試看喔！
您好，第一部分的code裡面
回覆刪除new Vue({
el:'#app',
data:''
});
是否應改成
new Vue({
el:'#app',
data: {
score: ''
}
});
謝謝
哀啊.....我在把code複製過來的過程中複製錯版本了......真的很不好意思，已經修正了，感謝您的通知。
刪除因為我也在try，怕有人看到那會卡關，有幾篇vue的版本import到ver1喔，辛苦了
刪除provdoOta-me Courtney Baart https://wakelet.com/wake/zyjsJuR_telcMgVNTNti9
回覆刪除oranunob