v-bind增强样式控制

vue2
1.2k 词
v-bind增强样式控制

v-bind增强样式控制#

原生通过添加类名、style行内样式、classList.add进行样式的控制

为了方便开发者进行 样式控制 ，Vue扩展了 v-bind 的语法，可以针对 class类名 和 style行内样式 进行控制

v-bind : 用于动态地设置标签属性

操作class#

语法： v-bind:class="对象/数组" ，v-bind是可以省略的

对象--键就是类名，值是布尔值。若值为true，有这个类，否则没有

<div class="box" :class="{类名1:布尔值,类名2:布尔值}"></div>

使用场景：一个类名，来回切换，比如 tab栏切换

数组--数组中所有的类，都会添加到盒子上，本质就是一个 class列表 

<div class="box" :class="['类名1','类名2',...]"></div>

注意这种方式写的类名要加引号

使用场景：批量添加或删除类

原样式
对象
数组
<div class="inner">原样式</div>
<div class="inner" :class="{pink:false,big:true}">对象</div>
<div class="inner" :class="['pink','big']">数组</div>

案例-京东秒杀tab导航高亮#

核心思路：

  1. 基于数据动态渲染tab-- v-for
  2. 准备下标，记录高亮的是哪一个tab-- activeIndex
  3. 基于下标，动态控制class类名-- v-bind:class

所谓切换高亮，其实就是在修改下标

<div id="jdtab">
    <ul>
        <li :class="{active:index===activeIndex}" @click="activeIndex=index" v-for="(item, index) in list" :key="item.id">
            <a href="javascript:;">{{ item.name }}</a>
        </li>
    </ul>
</div>
// 京东秒杀tab导航
const jdtab = new Vue({
    el: '#jdtab',
    data: {
        activeIndex: 0, // 记录高亮
        list: [
            { id: 1, name: '京东秒杀' },
            { id: 2, name: '每日特价' },
            { id: 3, name: '品类秒杀' },
        ],
    },
});

操作style#

语法： :style="样式对象"

使用场景：某个具体属性的动态设置

<div class="box" v-bind:style="{ css属性名1:css属性值,属性名2:值,... }"></div>
原样式
操作行内样式后
<div id="stylebox">
    <div class="inner">原样式</div>
    <div class="inner" :style="{ width:'100px',height:'100px',backgroundColor:'pink' }">操作行内样式后</div>
</div>

注意样式对象是一个js对象，属性和值就不能按css的格式写， - 连接的属性用驼峰命名法，或者用引号包裹

案例-进度条#

{{ percent }}% 
<div id="progressapp">
    <!-- 外层盒子 -->
    <div class="progress">
        <!-- 内层盒子 -->
        <div class="innerbox" :style="{width:percent+'%'}">
            <span>{{ percent }}%</span>
        </div>
    </div>
    <button @click="percent=item" v-for="(item, index) in progressList" :key="item">设置{{ item }}%</button>
</div>
// 进度条
const progress = new Vue({
    el: '#progressapp',
    data: {
        percent: 0,
        progressList: [10, 25, 50, 75, 100],
    },
});