一、过滤器

  1. <!-- 过滤器 -->
  2.     <div id="app">
  3.         {{msg | format(3)}}
  4.     </div>
  5.     <script>
  6.         var vm = new Vue({
  7.             el:"#app",
  8.             data:{
  9.                 msg:"99"
  10.             },
  11.             filters:{
  12.                 /* val就是msg params就是管道修饰符后面函数传递过来得参数*/
  13.                 format(val){
  14.                     return "$"+val.toFixed(params);
  15.                 }
  16.             }
  17.         })
  18.     </script>

二、计算属性

  1. <div id="app">
  2.         价格：<input type="number" min="1" v-model.number="price"/>
  3.         数量：<input type="number" min="1" v-model.number="count"/>
  4.         总价：<!-- {{price*count}} -->{{total}}
  5.     </div>
  6.     <script>
  7.         var vm = new Vue({
  8.             el:"#app",
  9.             data:{
  10.                 price:6,
  11.                 count:5
  12.             },
  13.             computed:{
  14.                 total(){
  15.                     return this.price*this.count;
  16.                 }
  17.             }
  18.         })
  19.     </script>

三、get set

  1.  <title>计算属性得get,set方法</title>
  2.     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  3. </head>
  4. <body>
  5.     <div id="app">
  6.         <input type="checkbox" v-model="isChecked">
  7.     </div>
  8.     <script>
  9.         var vm = new Vue({
  10.             el:"#app",
  11.             computed:{
  12.                 isChecked:{
  13.                     get(){
  14.                         return false
  15.                     }
  16.                 }
  17.             }
  18.         })
  19.     </script>

四、checkbox

  1. <div id="#app">
  2.         <input type="checkbox" v-model = "checkState" @click="change">
  3.     </div>
  4.     <script>
  5.         var vm = new Vue({
  6.             el:"#app",
  7.             data:{
  8.                 checkState:false
  9.             },
  10.             methods: {
  11.                 change(){
  12.                     console.log(this.checkState)
  13.                 }
  14.             },
  15.         })
  16.     </script>

五、购物车

  1.  <style>
  2.         img{
  3.             width:70px;
  4.             height: 100px;
  5.         }
  6.         .number{
  7.             width:40px;
  8.         }
  9.     </style>
  10.     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  11.     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
  12.     <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
  13. </head>
  14. <body>
  15.     <div id="app" class="container">
  16.         <h2 class="text-center text-success">购物车</h2>
  18.         <table class="table table-bordered table-hover">
  19.             <thead>
  20.                 <tr>
  21.                     <th>全选 <input 
  22.                         @change="change"
  23.                         type="checkbox" v-model="checkAll"></th>
  24.                     <th>商品</th>
  25.                     <th>单价</th>
  26.                     <th>数量</th>
  27.                     <th>小计</th>
  28.                     <th>操作</th>
  29.                 </tr>
  30.             </thead>
  31.             <tbody>
  32.                 <tr v-for="item of products">
  33.                     <td>
  34.                         <input type="checkbox" 
  35.                         @change="handleItem"
  36.                         v-model="item.isSelected">
  37.                     </td>
  38.                     <td>
  39.                         <img :src="item.productCover" alt="">
  40.                         {{item.productName}}
  41.                     </td>
  42.                     <td>
  43.                         {{item.productPrice}}
  44.                     </td>
  45.                     <td>
  46.                         <input class="number" type="number" v-model.number="item.productCount" min="1">
  47.                     </td>
  48.                     <td>
  49.                         {{item.productPrice*item.productCount | format(2)}}
  50.                     </td>
  51.                     <td><button class="btn btn-danger" @click="handleDelete">删除</button></td>
  52.                 </tr>
  53.             </tbody>
  54.         </table>
  55.         <p>总价格:{{sum() | format(2)}}</p>
  56.     </div>
  57.     <script>
  58.         /* ctrl+shift+p */
  59.         var vm = new Vue({
  60.             el:"#app",
  61.             data:{
  62.                 products:[],
  63.                 checkAll:false
  64.             },
  65.             mounted(){
  66.                 axios.get('./data/carts.json').then(res=>{
  67.                     console.log(res.data)
  68.                     this.products = res.data;
  69.                 })
  70.                 this.handleItem()
  71.             },
  72.             filters:{
  73.                 format(val,params){
  74.                     return "$"+val.toFixed(params)
  75.                 }
  76.             },
  77.             computed:{
  78.                 checkAll:{
  79.                     get(){
  80.                         return this.products.every(item=>item.isSelected)
  81.                     },
  82.                     set(val){
  83.                         this.products.forEach(item=>item.isSelected = val)
  84.                     }
  85.                 },
  86.                 sum(){
  87.                     alert(1)
  88.                     var total = 0;
  89.                     this.products.forEach(item=>{
  90.                         total = item.productCount*item.productPrice+total;
  91.                     })
  92.                     return total
  93.                 }
  94.             }
  96.         })
  97.     </script>
  98. </body>
  99. </html>