<!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <link href="../css/style.css" rel="stylesheet"> </head> <body> <div id="myApp"> <h1 v-if="result == 0">成绩未公布</h1> <h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1> <h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1> <h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1> <button @click="btnClick">考试成绩</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { result: 0 }, methods: { btnClick: function(){ this.result = Math.round(Math.random() * 100); }, }, }); </script> </body> </html>