Vue内置指令——v-if、v-else-if、v-else

沐小侠

已于 2022-06-29 09:38:38 修改

阅读量7.2k

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2022-06-29 09:37:33 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/125514336

版权

Vue.js 专栏收录该内容

26 篇文章 7 订阅

订阅专栏

v-if 指令用于条件性地渲染一块内容，Vue会根据表达式的值的真假条件来渲染元素。
v-else是搭配 v-if 使用，v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似 JS 的 if … else。
v-else-if充当v-if的else-if块，可以链式的使用多次。类似JS的 if … else if … else。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>条件渲染</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                成绩等级：
                <span v-if="score<=100 && score>=90">A</span>
                <span v-else-if="score<90 && score>=80">B</span>
                <span v-else-if="score<80 &&score>=60">C</span>
                <span v-else-if="score<60 && score>=0">D</span>
                <span v-else>非法</span>
            </p>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    score:100
                }
            });
        </script>
    </body>
</html>

沐小侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue内置指令——v-if、v-else-if、v-else

v-if 指令用于条件性地渲染一块内容，Vue会根据表达式的值的真假条件来渲染元素。v-else是搭配 v-if 使用，v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似 JS 的 if … else。v-else-if充当v-if的else-if块，可以链式的使用多次。类似JS的 if … else if … else。.........
复制链接

扫一扫