一、三元运算判断&按钮禁启用
功能介绍:成绩为60分以下的字体为红色,其他的为绿色
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<title></title>
<style type="text/css">
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- 做一个绑定 -->
<button :disabled="isButtonDisabled">测试</button>
<span v-bind:class="score<60?'red':'green'">{
{score}}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isButtonDisabled: false,
score: 70
},
</script>
</body>
</html>