Vue.js_判斷與循環

一、判斷，條件語句

1、一元表達式判斷

{{ ok ? 'show' : 'hide' }}

2、if判斷

v-if='ok'

<ol id="ifGrammar">
        <li>一元表達式判斷，元素A是否顯示：{{ok ? 'show': 'hide'}}</li>
        <li v-if="ok">元素A，判斷元素A是否渲染，show為顯示，hide為顯示</li>
        <li><input type="button" v-bind:value="inputVal" v-on:click="showFunc" /></li>
    </ol>
    <script>
        var ifGrammar = new Vue({
            el: "#ifGrammar",
            data: {
                ok: true,
                inputVal:"點擊隱藏元素"
            },
            methods: {
                showFunc: function () {
                    if (this.ok == true) {
                        this.ok = false;
                        this.inputVal = "點擊顯示元素";
                    } else {
                        this.ok = true;
                        this.inputVal = "點擊隱藏元素";
                    }
                }
            }
        })
    </script>

頁面：

【初始打開時】

 

【點擊隱藏后】

【點擊顯示后】

 

3、if...else 判斷

<div id="ifElse">
        <input v-model="Letter" type="text" placeholder="請輸入A、B或C進行測試" />
        <p v-if="Letter==='A'">努力學習</p>
        <p v-else-if="Letter==='B'">堅持奮斗</p>
        <p v-else>每天進步一點點</p>
    </div>
    <script>
        var ifElse = new Vue({
            el: "#ifElse",
            data: {
                Letter:"",
            },
        })
    </script>

頁面： 

 

4、v-show 指令

 <div id="div5" class="title">
        <p v-show="ok>=10">我有一個夢想，成為前端大神</p>
        <p v-show="ok<10">所以我要努力學習，天天向上</p>
        <input type="text" v-bind:value="ok" v-model="ok" />
    </div>
    <script>
        var div5 = new Vue({
            el: "#div5",
            data: {
                ok: 10
            }
        })
    </script>

頁面：

二、循環語句(遍歷)

v-for="i in data" + {{i}}

1、循環數組

<ul id="forTest" style="margin-top:50px;">
        <li v-for="i in name">{{i}}</li>
    </ul>
    <script>
        var forTest = new Vue({
            el: "#forTest",
            data: {
                name: [
                    { user: '小明' },
                    { user: '小紅' },
                    { user: '小黑' },
                    { user: '小紫' },
                    { user: '小桃' },
                    { user: '小張' },
                    { user: '小李' },
                ]
            }
        })
    </script>

頁面：

 

2、循環對象

 <ul id="objFor">
        <li style="color:#0094ff">值循環</li>
        <li v-for="value in obj">{{value}}</li>
        <li></li>
        <li style="color:#0094ff">值名與值循環</li>
        <li v-for="(value,key) in obj">{{key}}:{{value}}</li>
        <li></li>
        <li style="color:#0094ff">值名、值和index循環</li>
        <li v-for="(value,key,index) in obj">{{index}}__{{key}}:{{value}}</li>
    </ul>
    <script>
        var objFor = new Vue({
            el: "#objFor",
            data: {
                obj: {
                    title: "對象循環",
                    content: "類似於js的遍歷語句for...in",
                    url: "http://www.cnblogs.com/leona-d/",
                    study:"熱愛編程，努力學習，忠於專研"
                }
            }
        })
    </script>

頁面：

 

3、循環數字

<p id="p">
        <span v-for="n in 10">{{n}}---</span>
    </p>
    <script>
        var p = new Vue({
            el:"#p"
        })
    </script>

頁面：