<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.red1 {
color: red;
}
.tabUl {
display: flex;
list-style: none;
}
.tabUl li {
margin: 0 20px 0 0;
}
.show1 {
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<p>v-if 和计算属性</p>
<h5 v-if="score >=90">优秀</h5>
<h5 v-else-if="score >=80">良好</h5>
<h5 v-else>不及格</h5>
<!-- 使用计算属性写法 -->
<div>{{result}}</div>
<!-- 登入切换 -->
<div class="login">
<ul class="tabUl">
<li @click="tabsClick(0)">账号</li>
<li @click="tabsClick(1)">邮箱</li>
</ul>
<div class="login11" v-show="isUser ==0">
<label for="username">用户账号：</label>
<input type="text" id="username" placeholder="请输入用户账号" key="username" />
</div>
<div class="login11" v-show="isUser ==1">
<label for="email">用户邮箱：</label>
<input type="text" id="email" placeholder="请输入用户邮箱" key="email" />
</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
score: 85,
isUser: 0,
},
computed: {
result() {
let showMessage = '';
if (this.score >= 90) {
showMessage = '优秀'
} else if (this.score >= 80) {
showMessage = '良好'
} else {
showMessage = '不及格'
}
}
},
created: function () {},
methods: {
tabsClick(index) {
this.isUser = index;
}
}
})
</script>
</html>
