vue模板与配置小demo练习

最新推荐文章于 2020-03-29 23:07:21 发布

gxgalaxy

最新推荐文章于 2020-03-29 23:07:21 发布

阅读量216

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/gxgalaxy/article/details/105083203

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

通过使用vue模板和配置中的知识完成下面的demo
可以增加和减少商品的库存，删除商品，同时商品的库存会发生改变。
使用到的知识点：

v-for
插值
注册事件 v-on
v-show
keydown.enter

代码实现：

<!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>Document</title>
  <script src="./vue.js"></script>
 <link rel="stylesheet" href="./css/index.css">
  <style>
    #app{
      text-align: center;
    }
    table{
      width:100%;
      border-collapse: collapse;
      margin: 30px auto;
    }
    table tr{
      height: 30px;
      line-height: height;
    }
    table th, table td{
      border: 1px solid #ccc;
    }
    .dark thead tr{
        background: darkblue;
        color: #fff;
      }
      .dark tbody tr:nth-child(even){
        background: lightblue;
      }

      .dark tbody tr:nth-child(odd){
        background: rgb(205, 227, 235);
      }

      .dark tfoot tr{
        background: rgb(1, 1, 182);
        color: #fff;
      }
  
  </style>
</head>
<body>
      <div id="app">
          <h1>商品与库存管理</h1>
          <p>共<strong>{{ products.length }}</strong>件商品</p>
          <button @click = "isDark = !isDark">切换表格样式</button>
          <table :class = "isDark ? 'dark' : ''">
              <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品库存</th>
                    <th>操作</th>
                </tr>
              </thead>
              <tbody>
                    <tr v-for = "(item,index) in products" :key = "index">
                      <td>{{ item.name }}</td>
                      <td>
                       <button @click = "decrease(item)">-</button>
                        {{ item.stock }} <button @click = "increase(item)">+</button>
                      </td>
                      <td>
                        <button @click = "products.splice(index, 1)">删除</button>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="text"@keydown.enter = "add"  v-model = "newProduct.name">
                      </td>
                      <td>
                        <input type="number" @keydown.enter = "add" v-model.number = "newProduct.stock">
                      </td>
                      <td>
                        <button @click = "add">添加</button>
                      </td>
                    </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td>总计</td>
                  <td>
                        {{ totalStock }}
                  </td>
                  <td></td>
                </tr>
              </tfoot>
          </table>
      </div>
      <script>
          var app = new Vue({
            el: "#app",
            data: {
              products:[
                {name: "小米手机",stock:10},
                {name: "华为手机",stock:20},
                {name: "iphone",stock:5},

              ],
              isDark: false,
              newProduct:{  //新产品
                name:"",
                stock: 0
              }

            },
            computed: {
              totalStock(){  //总库存
                var sum = 0;
                for(var i = 0; i < this.products.length; i++){
                  var prod = this.products[i];
                  sum += prod.stock;
                }
                return sum;
              }
            },
            methods: {
            //增加库存
              increase(item){
                item.stock ++;
              },
              //减少库存
              decrease(item){
                if(item.stock <=0){
                  return;
                }
                item.stock --;
              },
              //添加商品
              add(){
                this.products.push(this.newProduct);
                this.newProduct = {
                  name:"",
                  stock:0
                }

              }
            },
          })
      </script>
</body>
</html>