vue作业

1.写样式

3个input框 名称 价格 搜索
2个button按钮 添加 搜索
input多选框 裤子 200 X

2. 1. 定义空数组，和一个值
            arr:[],
            value:'',
            arrList: [] // 用于展示
    2.给名称 价格input框绑定 v-model="value" 
    给添加按钮绑定一个@click="add"
    add() {
      this.arr.push({
        content: this.value,
        this.value=''
      })
     3.给搜索input框绑定 v-model="value" 
        给添加按钮绑定一个@keyup="filter" 过滤器
        filter() {
        this.arrList = this.arr.filter((item, key) => {
        return item.content.includes(this.value)
      })
    }
    4.先写一个input多选框 裤子 200 X 样式，然后再data里增加list:[]数组
    给input多选框绑定事件:class="['list', item.isSelectd?'selected':'']" @click=change(item) v-model="value" 
             .selected{
                background: red;
                 }
        isActive: false,
        change(_item) {
      _item.isSelectd = !_item.isSelectd}
    5.写一个删除所选button按钮
    绑定一个删除事件
    还有上面的ul li也要绑定删除事件
    <button @click.stop="del(index)">删除</button>
    del(_index){
          this.arr.splice(_index,1)
          this.arrList = [...this.arr]
        },
    6.total()
    total(){
      let count = 0
      this.arrList.forEach(element => {
        count += element.price;
      });
      return count;
    }