Vue.js - vue小应用

最新推荐文章于 2024-04-08 09:22:47 发布

wust_cyl

最新推荐文章于 2024-04-08 09:22:47 发布

阅读量225

点赞数

分类专栏： Vue.js 文章标签： Vue.js - vue小应用

本文链接：https://blog.csdn.net/wust_cyl/article/details/82961271

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

刚刚学习vue.js，写一个一个简单的小应用，可以增加，删除，购买商品，自动计算费用。

<!DOCTYPE html>
<html>
<head>
    <title>TO DO List</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
  
</head>
<body  >
  <div id='table' > 
  <div class='container'>
    <div class='row'>
      <div class='col-md-2'>
        <h2 style='color:red'> 总价：{{sumMoney}} 元</h2>
      </div>
    </div>
  </div>
  
  <div class='container' style='margin-top:20px'>
    <div class='row'>
      <div class='col-md-6'> 
        <input type='text' placeholder="商品" v-model='product.name'>
        <input type='text' placeholder="单价" v-model='product.price'>
        <button class='btn btn-danger' v-on:click='addProduct'>添加</button>
      </div>
    </div>
  </div>
  <div class='container' style='margin-top:20px'>
    <div class='row'>
      <div class='col-md-7'>
        <table class='table table-striped'  >
          <thead>
            <tr>
                <th>商品</th>
                <th>单价</th>
                <th>购买数</th>
                <th>删除</th>
                <th>Buy Or Not</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for='item in items'>
              <td>{{item.name}}</td>
              <td>{{item.price}}</td>
              <td>{{item.number}}</td> 
              <td><button class='btn' v-on:click='Delete(item)'>&times;</button></td>
              <td> <button class='btn btn-info' v-on:click='addNumber(item)'>Buy</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
  <script src='./src/text.js'></script>
  
</body>
</html>

 

var app=new Vue({
  el: '#table',
  data: {
     items: [
      {"name":'钢笔',"price":50,"number":1},
      {"name":'练习本',"price":1,"number":0},
      {"name":'保温杯',"price":25,"number":0},
      {"name":'书包',"price":80,"number":0},
     ],
     product:{
       "name":'',
       "price":'',
     }
      
  },

  computed: {
    sumMoney: function() { //一个计算属性，用来计算费用
      let money=0;
      for (let data of this.items) {
        money+=data.price*data.number;
      }
      return money;
    }
  },

  methods: {
    addNumber: function(target) {  //购买
      target.number++;
    },
    addProduct: function() {   //添加商品
      this.items.push({
          "name":this.product.name,
          "price":this.product.price,
          "number":0,
        })
    }, 
    Delete: function(target) {  //删除商品
       let cnt=0;
       for (let obj of this.items) {
         if (obj.name==target.name) {
           this.items.splice(cnt,1);
           return ;
         }
         else cnt++;
       }
    }

  }
   
})