VUE学习日记（十八） ---- 传递数据

 

<div id="myPage">
      <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 myPage = new Vue({
        el:'#myPage',
        data:{
          
        }
      })
    </script>

 

效果展示：