源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue computed计算属性</title>
  6.     <script type="text/javascript" src="vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!-- <span>分数 {{ scroe >= 90 ? "优秀生" : "一般的学生" }}</span> -->
  11.         <!-- <span>{{ level }}</span> -->
  13.         <input type="text" v-model="firstname">
  14.         <input type="text" v-model="lastname">
  15.         <span>{{ username }}</span>
  16.     </div>
  17.     <script type="text/javascript">
  18.         new Vue({
  19.             el:"#app",
  20.             data:{
  21.                 scroe:95,
  22.                 firstname:"xiaochuan",
  23.                 lastname:"sun"
  24.             },
  25.             //简单的数据可以使用上面 html 中的 三元写法 但是复杂的话就得需要使用 computed 方法来计算了
  26.             computed:{
  27.                 level:function() {
  28.                     if(this.scroe >= 90){
  29.                         return "优秀生";
  30.                     }
  31.                     return "一般的学生    ";
  32.                 },
  33.                 username:function(){
  34.                     return "全名为【" + this.firstname + this.lastname + "】";
  35.                 }
  36.             }
  37.         })
  38.     </script>
  39. </body>
  40. </html>
  • 效果图

image.png