条件渲染:vue v-else-if

2018年05月16日 15:17 | 2846次浏览

v-else-if,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用,在 Vue 2.10 版本中新增。

<!DOCTYPE html>
<html>
<head>
    <title>Vue条件</title>
</head>
<body>
    <div id="app">
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
        <hr>
        <input type="text" v-model="type">
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                type: 'A',
            },
        });
    </script>
</body>
</html>



小说《我是全球混乱的源头》

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程