综合案例-购物车界面

  1. index.html
  2. style.css
  3. main.js
    在真实vue开发中,会使用组件,将这三个放到一个文件中。

在真实开发中,如果遇到了要显示小数位数的,可以使用在要显示的数字后面加上toFixed(2)。此外也可以使用过滤器操作。

过滤器的作用实际上就是格式化。

过滤器的定义在method之外。需要把需要过滤的参数传入到过滤器中

filters: {
                showprice(price){
                 return price.toFixed(2)   
            }

<td>{{book.price|showprice}}td>

按钮有一个属性是disabled,则此按钮无法点击。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    <script src="main.js">script> 
head>

<body>
    <div id="app">
     <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="(book,index) in books">
                <td>{{book.id}}td>
                <td>{{book.name}}td>
                <td>{{book.Date}}td>
                <td>{{book.price|showprice}}td>
                <td>
                    <button @click='add(index)'>按钮+button>
                    {{book.count}}
                    <button @click='sub(index)' v-bind:disabled ="book.count<=1">按钮-button>
                td>
                <td>
                    <button @click="remove(index)">移除button>
                td>
            tr>
          tbody>
      table>
      <h2>总价格:{{totalprice|showprice}}h2>
      div>
      <h2 v-else>购物车为空h2>
    div>
    <script>
        var vm=new Vue({
           el: '#app',
           data: {
              books:[
                  {
                      id: 1,
                      name: '算法导论',
                      Date: '2006-9',
                      price: 85,
                      count: 1
                  },
                  {
                      id: 2,
                      name: '编程艺术',
                      Date: '2006-2',
                      price: 59,
                      count: 1
                  },
                  {
                      id: 3,
                      name: '编程',
                      Date: '2008-10',
                      price: 39,
                      count: 1
                  }
              ]
           },
           computed: {
               totalprice(){
                   let totalprice = 0
                   for (let i = 0;i < this.books.length;i++){
                     totalprice+=this.books[i].price *this.books[i].count
                   }
                   return totalprice
               }
           },
           methods: {
               add:function(index){
                   this.books[index].count++
               },
               sub:function(index){
                   this.books[index].count--
               },
               remove:function(index){
                   this.books.splice(index)
               }
            },
              // 过滤器
            filters: {
                showprice(price){
                 return price.toFixed(2)   
            }
           }
        })
    script>
    
body>

html>

综合案例-购物车界面_第1张图片

你可能感兴趣的:(前端入门,vue,web,前端)