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 @   甜甜de微笑  阅读(32)  评论(0)  编辑  收藏  举报
相关博文：
·  9 vue之事件处理（过滤、事件修饰符、按键修饰符）
·  16 vue之计算属性
·  vue之条件渲染v-if
·  VUE框架v-if
·  前端学习-vue学习005-条件渲染
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示