zoukankan      html  css  js  c++  java
  • 条件渲染v-if

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link href="../css/style.css" rel="stylesheet"> </head>
    
    <body>
    <div id="myApp">
        <h1 v-if="result == 0">成绩未公布</h1>
        <h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>
        <h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>
        <h1 v-else>{{result}}分 - 考得不错,玩游戏吧!</h1>
        <button @click="btnClick">考试成绩</button>
    </div>
    <script>
        var myApp = new Vue({
            el: '#myApp', 
            data: {
                result: 0
            },
            methods: {
                btnClick: function(){
                    this.result = Math.round(Math.random() * 100);
                },
            },
        });
    </script>
    </body>
    
    </html>
  • 相关阅读:
    My SQL
    弹窗
    DBDA
    ThinkPHP验证码与文件上传
    ThinkPHP表单验证
    ThinkPHP增删改
    ThinkPHP模型(查询)
    ThinkPHP跨控制器调用方法
    Superset安装
    Presto资源组配置
  • 原文地址:https://www.cnblogs.com/Jeely/p/11057273.html
Copyright © 2011-2022 走看看