vueリスニングイベントによる簡単なショッピングカート

一、htmlページ

    

    

        
  
        
    
        
    
        
    
        
  
    
    

        
{{ iphone.id }}
        
{{ iphone.name }}
        
{{ iphone.price }}
        

        -
        {{ iphone.count }}
        +
        
        

          
        
    
    
      ：${{totalPrice()}}

、cssスタイル

table {
    border: 1px solid black;
}
table {
    width: 100%;
}
th {
    height: 50px;
}
th, td {
    border-bottom: 1px solid #ddd;
}

、jsコード

var app = new Vue({
  el: '#app',
  data: {
    Ip_Json: [{
      id: 1,
      name: 'iphone 8',
      price: 5099,
      count: 1
    },
      {
      id: 2,
      name: 'iphone xs',
                price: 8699,
                count: 1
              },
              {
                id: 3,
                name: 'iphone xr',
                price: 6499,
                count: 1
              }]

  },
  methods:{
    totalPrice : function(){
      var totalP = 0;
      for (var i = 0,len = this.Ip_Json.length;i

: は からhttps://www.runoob.com/