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。.........

沐小侠

7386人浏览 · 2022-06-29 09:37:33

沐小侠 · 2022-06-29 09:37:33 发布

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>