vue2中怎么使用css样式实现给元素穿衣的功能

使用css样式具体的方法如下

<template>

  <div class="style">

    <!-- 以对象的方式来表示动态的class类名 写法:class="{class类名:动态class类变量名}" -->

    <P :class="{active: isActive,hide: hideActive}">这是一个活动的p</P>30

    <div :class="{'box':isBox}">这是box</div>

    <ul>

        <!-- 动态的class类变量名可以是一个对象变量名 -->

        <li :class="{my_box:objClass}">这是直接以对象变量名来显示css样式</li>

    </ul>

    <!-- 以数组的方式来动态的表示class类名 写法:class=[变量名1,变量名2,类名字符串] -->

    <p :class="[showClass,boxClass,'ac']">文字</p>

  </div>

</template>

<script>

export default {

    name: 'CSS',

    data() {

        return {

            // 声明几个变量,类型为布尔值

            isActive: true,

            // 布尔值为false,就不会显示该样式

            hideActive: false,

            isBox: true,

            // 声明一个对象,存放几个不同布尔变量

            objClass: {

                liClass: true,

                show: true

            },

            // 用变量来表示类名

            // 用法变量名: 类名(用字符串表示)

            showClass: 'show',

            boxClass: 'box1'

        }

    }

}  

</script>

 

用计算属性来表示类名的用法如下