Vue.js 条件语句

阅读 92

2022-02-19

v-if

<div id="app">
    <p v-if="flag">flag是true就显示我</p>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>

v-else

<div id="app">
    <p v-if="flag">flag==true</p>
    <p v-else>flag==false</p>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>

v-else-if

<div id="app">
    <p v-if="type==='A'">A</p>
    <p v-else-if="type==='B'">B</p>
    <p v-else-if="type==='C'">C</p>
    <p v-else>D</p>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            type: 'C'
        }
    })
</script>

v-show

<div id="app">
    <p v-show="flag">11111111</p>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>

精彩评论(0)

0 0 举报