绑定样式

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

一。绑定样式：

1.:class可以绑定一个对象，对象的属性名是类选择器的名称，属性值返回true，表示添加该选择器(适用于要绑定的个数确定，名字也确定，但动态决定要不要用)。

  <button @click="bg_b=true" >显示蓝色背景</button>
  <button @click="c_w=true">显示白色字体</button>
  <h2 :class="{bg_b,c_w}">你好啊</h2>

2. :class可以绑定字符串一个数组，数组中的每一个元素就是一个选择器 （用于绑定样式不确定，名字也不确定）

            <button @click="arr.push('bg_p')">显示粉色背景</button>
            <button @click="arr.push('c_g')">显示绿色字体</button>
            <div :class="arr">好好学习Vue</div>

①:class可以直接绑定一个表示

  <div :class="bg_b? 'bg_b':''">好好学习Vue</div>
  <hr />

②:class也可以通过数组绑定多个表达式

  <!-- bg_b==true吗？等于的话就为bg_b,否则为空 -->
  <!-- c_w==true吗？等于的话就为c_w,否则为空 -->
  <div :class="[bg_b? 'bg_b':'',c_w? 'c_w':'']">好好学习Vue</div>

3. :class是绑定类选择器，:style是绑定内联样式。

:style通常也是绑定一个对象，对象的属性名是原生CSS的属性名，但是要采用小驼峰命名规范。

bgc值为orabge,c值为red

  <div :style="{backgroundColor:bgc,color:c}">好好学习Vue</div>
  

4.小练习：实现点谁，谁高亮

          <ul>
    <!-- @click="activeIndex=index"  点击的时候让高亮索引等于对应的数组索引 -->
    <!-- :class="{active:activeIndex==index} " 如果高亮索引等于对应的索引下标，就添加类名active -->
    <li
      @click="activeIndex=index"
      v-for="(item,index) in list"
      :key="index"
      :class="{active:activeIndex==index} "
    >
      {{item}}
    </li>
  </ul>