<!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>