Vue中如何用input，button制作根据输入成绩输出优良差

Vue中如何用input，button制作根据输入成绩输出优良差

题主要的代码如下，有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <input type="text" v-model="score" /><input type="button" v-on:click="checkScore" value="检查" />{{scoreRst}}
</div>
<script>
    new Vue({
        el: '#app',
        data: { score:'' ,scoreRst:''},
        methods:{
            checkScore: function () {
                if (!isNaN(this.score)) {
                    var score = parseInt(this.score);
                    if (score >= 90) this.scoreRst = '优秀';
                    else if(score >= 80) this.scoreRst = '良';
                    else if(score >= 70) this.scoreRst = '中';
                    else if(score >= 60) this.scoreRst = '及格';
                    else this.scoreRst = '不及格';
                }
                else this.scoreRst = '';
            }
        }
    });
</script>

很简单vue里面v-model绑定成绩，在js里面写一个函数，里面主要是通过成绩的值来进行判断优良差，这个函数需要button的鼠标点击事件来触发执行

先input双向数据绑定
点击按钮的时候拿到这个数据，用if判断，输出优良差

input v-model 一个变量，button绑定事件 点击的时候判空，符合哪一个档，就对应输出优良差