最新 New

[公告]草監網路更改網址至gratch.tw

[教學] Vue js快速上手 (三) 必學的if else!v-show!

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ,將於3秒後自動跳轉
上一篇我們學到了real time即時更新頁面的方法,在學習任何一種程式語言時,基本上都會有一些必學的東西,比方說變數、參數、if else 、 for loop 、 for each 、 while 與一些運算子(加、減、乘、除、and、or等等),這些都是一定會學到的東西,一旦你真的搞懂,即便換了一套程式語言,你也會發現這些部分都很似曾相識,所以這篇我們要來講的就是if else!

來介紹一下這一篇你會學到的三個html 擴充屬性:
  1.  v-show :這是Vue.js特有的寫法,基本上就是等於v-if,所以屬性值就是所謂的運算條件了。
  2.  v-if :同v-show,唯一差別是v-show只是用css dispaly:none來隱藏,但v-if是真的會移除
  3.  v-else : 這是當v-show或v-if條件不成立時需要選擇的答案
看完上面三點如果你覺得你完全沒看懂,千萬不要緊張,也不要覺得困難,就把它當專有名詞就好,就像橘子為什麼叫橘子,柳丁為什麼叫柳丁一樣,就只是一個名詞而已,不要為了看不懂這些名詞就停下來。現在我們來舉個實際範例來實現if else功能!

不知道到目前為止大家覺得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,各位也可以自行試試看喔!

留言

  1. 您好,第一部分的code裡面
    new Vue({
    el:'#app',
    data:''
    });
    是否應改成
    new Vue({
    el:'#app',
    data: {
    score: ''
    }
    });

    謝謝

    回覆刪除
    回覆
    1. 哀啊.....我在把code複製過來的過程中複製錯版本了......真的很不好意思,已經修正了,感謝您的通知。

      刪除
    2. 因為我也在try,怕有人看到那會卡關,有幾篇vue的版本import到ver1喔,辛苦了

      刪除

張貼留言