Vueは簡易ショッピングカートの実例を実現します。


本論文の例では、Vueが簡易ショッピングカートを実現するための具体的なコードを共有しています。
まず完成した効果を見てみましょう。

CSS部分
ここでは何も言いません。v-cloakという知識点です。

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: center;
}
th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
[v-cloak]{
  display: none;
}
HTML部分
ここではいくつかのVueの知識点を説明します。
  • v-i
  • v-for
  • v-cloak
  • v-on>@
  • v-bind>:
  • メソッドmethods
  • プロパティを計算します。
  • フィルタfilters
  • 
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>   </title>
      <link rel="stylesheet" href="style.css" >
    </head>
    <body>
      
      <div id="app" v-cloak>
        <div v-if="books.length">
          <table>
            <thead>
              <tr>
                <th></th>
                <th>    </th>
                <th>    </th>
                <th>  </th>
                <th>    </th>
                <th>  </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in books">
                <th>{{item.id}}</th>
                <th>{{item.name}}</th>
                <th>{{item.date}}</th>
                <!--              -->
                <!-- <th>{{"¥"+item.price.toFixed(2)}}</th> -->
                <!--   -->
                <!-- <th>{{getFinalPrice(item.price)}}</th> -->
                <!--   -->
                <th>{{item.price | showPrice}}</th>
                <th>
                  <button @click="decrement(index)" :disabled="item.count<=0">-</button>
                  {{item.count}}
                  <button @click="increment(index)">+</button>
                </th>
                <th><button @click="removeHandle(index)">  </button></th>
              </tr>
            </tbody>
          </table>
          <h2>   :{{totalPrice | showPrice}}</h2>
        </div>
        <h2 v-else>
               
        </h2>
      </div>
    
    </body>
    <script src="../js/vue.js"></script>
    <script src="main.js"></script>
    </html>
    JSの部分
    
    const app = new Vue({
      el:"#app",
      data:{
        books:[
          {
            id:1,
            name:"《    》",
            date:'2006-9',
            price:85.00,
            count:1
          },
          {
            id:2,
            name:"《UNIX    》",
            date:'2006-2',
            price:50.00,
            count:1
          },
          {
            id:3,
            name:"《    》",
            date:'2008-10',
            price:39.00,
            count:1
          },
          {
            id:4,
            name:"《    》",
            date:'2006-3',
            price:128.00,
            count:1
          },
          
        ]
      },
      methods: {
       //                  ,        ,        。
        // getFinalPrice(price){
        //   return "¥"+price.toFixed(2)
        // },
        increment(index){
          this.books[index].count++
        },
        decrement(index){
          this.books[index].count--
        },
        removeHandle(index){
          this.books.splice(index,1);
        }
    
      },
      computed: {
        totalPrice(){
          //    :   for  
          // let totalPrice = 0;
          // for(let i=0;i<this.books.length;i++){
          //   totalPrice += this.books[i].price * this.books[i].count
          // }
          // return totalPrice
    
          //    :for in
          // let totalPrice = 0;
          // for(let i in this.books){
          //   // console.log(i);//1 2 3 4
          //   totalPrice += this.books[i].price * this.books[i].count
          // }
          // return totalPrice
    
          //    :for of
          // let totalPrice = 0;
          // for(let item of this.books){
          //   // console.log(item);//               
          //   totalPrice += item.price * item.count
          // }
          // return totalPrice
    
          //    :reduce
          return this.books.reduce(function (preValue, book) {
            // console.log(book);//        
            return preValue + book.price * book.count
          }, 0)
        }
      },
      //    
      filters:{
        showPrice(price){
          return "¥"+price.toFixed(2)
        }
      }
    })
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。