30天学完vue打卡第四天

1、v-bind操作class以及操作style

2、使用计算属性computed

一、v-bind操作class以及style

       <!-- 使用v-bind对类名进行操作 -->
        <!-- 对象形式 -->
        <div class="box" :class="{pink:true,big:true}">BON</div>
        <!-- 数组形式 -->
        <div class="box" :class="['pink','big']">BON</div>

案例：京东秒杀

<!-- 京东秒杀案例 -->
<ul class="ad">
   <li v-for="(item,index) in list" :key="item.id" @click="activeIndex=index">
       <a :class="{active:index == activeIndex}" href="#">{{item.name}}</a>
    </li>
</ul>

<script>
   const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 0,//记录高亮
          list: [
             { id: 1, name: '京东秒杀' },
             { id: 2, name: '每日特价' },
             { id: 3, name: '品类秒杀' }
              ]
         }
    })
</script>

效果：

v-bind操作style

<div class="box" :style="{width: '300px',height:'300px',backgroundColor:'pink'}"></div>

二、使用计算属性computed

methods：提供方法,处理业务逻辑 {{方法名()}}

 computed：计算属性,对于数据处理,求得一个结果 {{计算属性}}

 特点:计算属性会对计算出来的 结果缓存 ,再次使用直接读取缓存

            依赖变化了,会自动重新计算,并再次缓存

computed: {
       totalCount() {
          // 基于现有的数据，编写求值逻辑
          // 通过this访问到app实例
          // 对this的list进行求和 reduce
         // 0为求和起始值,给到sum
     let total = this.list.reduce((sum, item) => sum + item.num, 0)
        // 计算属性有缓存,一旦计算出来,立刻缓存,下一次读取直接读缓存
         console.log('计算属性执行了');
            return total;
       }
  }

完整版写法：

 computed: {
    //    完整写法: 获取+设置
    fullName: {
       // 1-当fullName计算属性，被获取求时，执行get（有缓存）
       // 会将返回值作为求值的结果
         get() {
           return this.firstName + this.lastName
               },

        // 2-当fullName计算属性，被修改赋值时，执行set
         // 修改的值，传递set方法的形参
          set(value) {
            // 字符串截取 slice
            // console.log(value.slice(0, 1));
            // console.log(value.slice(1));
            this.firstName = value.slice(0, 1);
              this.lastName = value.slice(1);

                    }
                }

        }