<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1.引入VUE</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> </head> <body> <div id="app"> <h1>您的成绩评价</h1> <div> score: {{score}} {{strResult}} </div> <div> <button @click="btnClick">改变</button> </div> </div> <script> new Vue({ el: '#app', data: { score: 0, strResult: "", }, methods: { btnClick: function() { this.score = Math.round(Math.random() * 100); if(this.score < 60) this.strResult = "不及格"; else if(this.score < 80) this.strResult = "中等生"; else if(this.score <= 100) this.strResult = "优秀生"; }, }, }) </script> </body> </html>