<!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>您的成绩评价</h1> <test-result :score="50"></test-result> <test-result :score="65"></test-result> <test-result :score="90"></test-result> <test-result :score="100"></test-result> </div> <script> Vue.component('test-result', { props: ['score'], template: '<div><strong>{{score}}分，{{testResult}}</strong></div>', computed: { testResult: function() { var strResult = ""; if (this.score < 60) strResult = "不及格"; else if (this.score < 90) strResult = "中等生"; else if (this.score <= 100) strResult = "优秀生"; return strResult; } } }); var myApp = new Vue({ el: '#myApp', }); </script> </body> </html>