<div>
{{text.split(',').reverse().join(',')}}
</div>.

<div id="CalculationProperties">
     {{ReversedText}}
 </div>
<script>
    var CalculationProperties = new Vue({
      el: "#CalculationProperties",
      data: {
        text:"123,456",
      },
      computed: {
        ReversedText: function ()
        {
          //所有計(jì)算屬性都以函數(shù)的形式寫在Vue實(shí)例內(nèi)的computed選項(xiàng)內(nèi)，最終返回計(jì)算后的結(jié)果
          return this.text.split(',').reverse().join(',')
        }
      }
    })
</script>

<div id="prices">
     總價(jià)： {{prices}}
    </div>
 <script>
    // <!--購物車總價(jià)-->
    var prices = new Vue({
      el: "#prices",
      data: {
        package1: [
        {
          name: "華為mate20pro",
          price: 4566,
          count: 2
        },
        {
          name: "華為p30",
          price: 4166,
          count: 2
        },
        ],
        package2: [
        {
          name: "蘋果",
          price: 30,
          count: 2
        },
        {
          name: "香蕉",
          price: 2,
          count: 20
        },
        ]
      },
      computed: {
        prices: function () {
          var prices = 0;
          debugger
          for (var i = 0; i < this.package1.length; i++) {
            prices += this.package1[i].price * this.package1[i].count;
          }
          for (var i = 0; i < this.package2.length; i++) {
            prices += this.package2[i].price * this.package2[i].count;
          }
          return prices;
        }
      }
    })
 </script>

<!--setter-->
    <div id="setter">
     姓名： {{fullName}}
    </div>
<script>
 var setter = new Vue({
      el: "setter",
      data: {
        firstName: 'Jack',
        lastName:'Green'
      },
      computed: {
        fullName: {
          //getter,用于讀取
          get: function ()
          {
            return this.firstName + ' ' + this.lastName
          },
          //setter，寫入時(shí)觸發(fā)
          set: function (newValue)
          {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          }
        }
      }
    })
</script>

<div id="app1"></div>
 <div id="app2">
     {{reversedText}}
 </div>
<script>
    var app1 = new Vue({
      el: "#app1",
      data: {
        text: "123,456"
      }
    });
    var app2 = new Vue({
      el: "#app2",
      computed: {
        reversedText: function () {
          //這里是依賴app1實(shí)例中的數(shù)據(jù)text
          return app1.text.split(',').reverse().join(',')
        }
      }
    })
</script>

computed：{
now：function（）
{
return Date.now()
}
}