6 vue之条件渲染

1 条件渲染

 

 

2 案例

根据分数显示优秀、良好、一般、不及格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    
    <h1 v-if="score>=90">优秀</h1>
    <h1 v-else-if="score>=80 && score<90">良好</h1>
    <h1 v-else-if="score>=60 && score<80">一般</h1>
    <h1 v-else>不及格</h1>

</div>
</body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            score:89
        },
    })
</script>
</html>

 

 

 

posted @ 2022-02-10 16:30  甜甜de微笑  阅读(26)  评论(0)  编辑  收藏  举报