这个主要是Vue比较简单的方法去判断你的分数是否通过了考试
这个功能是特别简单。基础的,后续有了更好的方法和更美观的改进,会更新的
实现的效果是
当分数大于等于60的时候
当分数小于60分的时候
他的vue核心代码如下
<template>
<div id="app">
<div class="container">
<p v-if="score!==''">是否通过考试 :{
{
isPassed()?'恭喜你,通过了考试':'很抱歉,你未能通过考试'}}</p>
<input type="text" placeholder="请输入你的成绩是……" v-model="score">
</div>
</div>
</template>
<script>
export default {
name: "app",
// 数据
data() {
return {
score:'',
};
},
methods:{
isPassed(){
if(this.score){
return parseInt(this.score)>=60;
}
return false;
},
},
};
</script>
<style scoped>
.container{
width: 400px;
height: 300px;
}
p{
width: 400px;
height: 50px;
background-color: red;
color: black;
font-size: 16px;
}
input{
background: #fff;
width: 200px;
height: 30px;
color: blueviolet;
background-color: #fcfcfc;
}
</style>
<style >
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
留言:初学阶段,记录自己的学习和把自己所学分享一下,有更好的办法。欢迎大家来交流
另外,要是通过的话,背景色是绿色的,没有通过是红色的。这个怎么实现呀?
求指教