vue初学-day06

18-(掌握)作业的回顾和实现P40 - 00:03



<li v-for="(item,index) in users"

:class="{active:currentIndex===index}"

@click="btnLI(index)">{{item}}

const app = new Vue({  
el:"#app",  
data:{   
 message:"你好啊",  
  currentIndex:0, 
   users:["张三","李四","王五","王麻子","二狗子","壮壮···"] 
 }, 
 methods:{  
  btnLI(nowNum){  
    this.currentIndex=nowNum;  
    console.log(nowNum)   
 } 
 }
})

19-(掌握)购物车案例-界面搭建P41 - 00:04

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>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <!--<td>{{getPrice(item.price)}}</td>-->
        <td>{{item.price | getFilter}}</td>
        <td>
          <button @click="subtraction(index)" v-bind:disabled="item.count<=1">-</button>
          {{item.count}}
          <button @click="addBtn(index)">+</button>
        </td>
        <td><button @click="removeClick(index)">移除</button></td>
      </tr>
    </tbody>
    </table>
  </div>
  <h2 v-else>购物车为空</h2>
  <h2>总价格：{{totalPrince | getFilter}}</h2>
</div>


const app= new Vue({
  el:"#app",
  data:{

      books:[
          {
            id:0,
            name:"Linux理论基础",
            date:2020-1201,
            price:52,
            count:1,
          },
        {
          id:1,
          name:"js入门到放弃",
          date:2020-1,
          price:43,
          count:1,
        },
        {
          id:2,
          name:"计算机导论",
          date:2020-10-1,
          price:85,
          count:1,
        },
        {
          id:3,
          name:"数据结构与算法",
          date:2020-12-6,
          price:25,
          count:1,
        },
      ]
  },
  methods:{
    getPrice(price){
      return "￥"+price.toFixed(2)
    },
    addBtn(index){
      this.books[index].count++
    },
    subtraction(index){
      this.books[index].count--
    },
    removeClick(index){
      this.books.splice(index,1)
    }
  },
  //过滤器
  filters:{
    getFilter(price){
      return "￥"+price.toFixed(2)
    }
  },
  computed:{
    totalPrince(){
      let total=0;
      // for(let i=0;i<this.books.length;i++){
      //   total+= this.books[i].price * this.books[i].count;
      // }
      for(let i in this.books){
        total+= this.books[i].price * this.books[i].count;
      }
      return total;
    }
  }

});