Vue.js入门教程—条件语句(8)

目录

前言

一、条件语句

二、使用

1. v-if

2. v-else-if

3. v-else

4. v-show

5. 组合输出

---

前言

当有一天，你只管去做的时候，就离成功不远了。

 

一、条件语句

    Vue.js中的条件有四个

• v-if
• v-if-else
• v-else
• v-show

二、使用

1. v-if

<div id="app">
    <template v-if="score >= 60">及格</template>
    <template v-if="score < 60">不及格</template>
</div>

<script>
    new Vue({
        el: '#app',

        data: {
            score: 60
        }
    })
</script>

 输出结果:

及格

2. v-else-if

  注：v-else-if 必须和v-if结合使用， 单独使用不生效。

<div id="app">
    <template v-if="score < 60 ">差</template>
    <template v-else-if="score >= 60 && score < 80">中</template>
    <template v-else-if="score >= 80 && score < 90">良</template>
    <template v-else-if="score >= 90">优</template>
</div>

<script>
    new Vue({
        el: '#app',

        data: {
            score: 30
        }
    })
</script>

3. v-else

  注：v-else 必须和v-if结合使用， 单独使用不生效。

<div id="app">
    <template v-if="score <= 60">良好</template>
    <template v-else="score > 60">优秀</template>
</div>

<script>
    new Vue({
        el: '#app',

        data: {
            score: 30
        }
    })
</script>

4. v-show

<div id="app">
    <template v-show="score > 60">OK</template>
</div>
<script>
    new Vue({
        el: '#app',

        data: {
            score: 80
        }
    })
</script>

5. 组合输出

<div id="app">
    <template v-if="sex == 1">男</template>
    <template v-else-if="sex == 2">女</template>
    <template v-else>未知</template>
</div>
<script>
    new Vue({
        el: '#app',

        data: {
            sex: 3
        }
    })
</script>