(6)v-if ;v-else-if ;v-else的实例

v-if ;v-else-if ;v-else通过分数展示分数等级的案例。

<!DOCTYPE html>
<html>
    <body>
    <div id="app">
        <!-- 第一种传统方式 -->
    <!-- <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2> -->

    <!-- 代码规范采用计算属性的方式 -->
    <h2>{{result}}</h2>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script> 
        var app=new Vue(
            {el:"#app",
            data:{
               score:90
            },
            methods:{
                
            },
            computed:{
                result(){
                    let showMessage='';
                    if(this.score>=90)
                    {
                        showMessage='优秀'
                    }
                    else if(this.score>=80)
                    {
                        showMessage='良好'
                    }
                    else if(this.score>=60)
                    {
                        showMessage='及格'
                    }
                    else
                    {
                        showMessage='不及格'
                    }
                    return showMessage
                }
                
            }
})</script>
    </body>
</html>
上一篇:小程序笔记(二)之设置进度条progress的宽度


下一篇:Delphi中String当数组用,多余的空格去除