B站vuejs视频中的案例

成果如下：

这是部署框架的代码：

<!DOCTYPE html>
<html>

<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>书籍购物车</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- <link rel="stylesheet" href="style.css"> 引入文件
  <script src="main.js"></script> -->

  <style>
    table{
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }
    th,td{
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }
    th{
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
  </style>

</head>

<body>

  <!-- 书籍购物车 -->
  <div id="app">
  <table>
    <thead>  <!-- 标题-->
      <tr> <!-- 行-->
        <th></th> <!-- 列 -->
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>  <!-- 内容 -->
      <tr v-for='item in books'>
        <!-- <td v-for='value in item'>{{value}}</td> -->
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.data}}</td>
        <td>{{item.price}}</td>
        <td>
          <button>-</button>
          {{item.count}}
          <button>+</button>
        </td>
        <td><button>移除</button></td>
      </tr>
    </tbody>
  </table>
  </div>

  <script>
    var app= new Vue({
      el: '#app',
      data: {
        books:[
          {
            id:1,
            name:'《数学》',
            data:'2018-06',
            price: 35.00,
            count:1
          },
          {
            id:2,
            name:'《物理》',
            data:'2018-06',
            price: 45.00,
            count:1
          },
          {
            id:3,
            name:'《英语》',
            data:'2020-06',
            price: 25.00,
            count:1
          },
          {
            id:4,
            name:'《音乐》',
            data:'2019-06',
            price: 15.00,
            count:1
          },
        ]
      },
        methods: {
          
        },
    });
  </script>
</body>

</html>

成果如下：

 跟成果相比，价格那列没有保留两位小数且没有“￥”符号，以及购买和操作那里的按钮还没实现其功能

价格保留两位小数的实现： 
        <td>{{'￥'+item.price.toFixed(2)}}</td>

或者利用methods方法：

 <td>{{getPrice(item.price)}}</td>


 methods: {
          getPrice(price){
            return '￥'+ price.toFixed(2)
          }
        }

或者利用过滤器：

<td>{{item.price | showPrice}}</td>

 filters:{
          showPrice(price){
            return '￥'+ price.toFixed(2)
          }
        }

购买和操作的功能实现：

 <tr v-for='(item,index) in books'>
        <td>
          <button @click="div(index)" :disabled = "item.count <= 1">-</button>
          {{item.count}}
          <button @click="add(index)">+</button>
        </td>
        <td><button @click = "remove(index)">移除</button></td>
 </tr>


methods: {
          div(index){
            this.books[index].count--
          },
          add(index){
            this.books[index].count++
          },
          remove(index){
            this.books.splice(index,1)
          }
        }

总体代码如下：

<!DOCTYPE html>
<html>

<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>书籍购物车</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- <link rel="stylesheet" href="style.css"> 引入文件
  <script src="main.js"></script> -->

  <style>
    table{
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }
    th,td{
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }
    th{
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
  </style>

</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='(item,index) in books'>
            <!-- <td v-for='value in item'>{{value}}</td> -->
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.data}}</td>
    
            <!-- <td>{{'￥'+item.price.toFixed(2)}}</td> -->
            <!-- <td>{{getPrice(item.price)}}</td> --><!-- methods -->
            <td>{{item.price | showPrice}}</td>
    
            <td>
              <button @click="div(index)" :disabled = "item.count <= 1">-</button>
              {{item.count}}
              <button @click="add(index)">+</button>
            </td>
            <td><button @click = "remove(index)">移除</button></td>
          </tr>
        </tbody>
      </table>
      <h2>总价格：{{price |  showPrice}}</h2>
    </div>
    <h1 v-else>购物车为空</h1>
  </div>

  <script>
    var app= new Vue({
      el: '#app',
      data: {
        books:[
          {
            id:1,
            name:'《数学》',
            data:'2018-06',
            price: 35.00,
            count:1
          },
          {
            id:2,
            name:'《物理》',
            data:'2018-06',
            price: 45.00,
            count:1
          },
          {
            id:3,
            name:'《英语》',
            data:'2020-06',
            price: 25.00,
            count:1
          },
          {
            id:4,
            name:'《音乐》',
            data:'2019-06',
            price: 15.00,
            count:1
          },
        ]
      },
        methods: {
          // getPrice(price){
          //   return '￥'+ price.toFixed(2)
          // }
          div(index){
            this.books[index].count--
          },
          add(index){
            this.books[index].count++
          },
          remove(index){
            this.books.splice(index,1)
          }
        },
        filters:{//过滤器——函数
          showPrice(price){
            return '￥'+ price.toFixed(2)
          }
        },
        computed: {
          price:function(){
            let result = 0
            for(let i=0;i<this.books.length;i++){
              result += this.books[i].price * this. books[i].count
            }
            return result
          }
        },
    });
  </script>
</body>

</html>

 

 

# vue.js
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

动物识别系统 python实现+UI

avatar 腾讯云开发者社区

Linux下安装MySQL8.0(超详细)

Linux下安装MySQL8.0(超详细)

avatar 腾讯云开发者社区
cover

光模块问题查看并保证光模块收发功率

avatar 腾讯云开发者社区