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