vue基础---Class 与 Style 绑定

【一】绑定HTML Class

    （1）对象语法

    ①普通绑定class

    <div id="area" v-bind:class="className"></div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#area",
            data:{
                className:"show_area"
            }
        })
    </script>

    此时会发现class类名为show_area

    ②内联绑定数据对象

    我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

    上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

    你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

    <div id="areaId" class="show_area" v-bind:class="{area:area_status,active:active_status,back:back_status}"></div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#areaId",
            data:{
                area_status:true,
                active_status:true,
                back_status:false
            }
        })
    </script>

结果：

当 area_status或者 active_status、back_status变化时，class 列表将相应地更新。例如，如果 back_status的值为 true，class 列表将变为 "show_area area active back"。

    ③外部绑定

    绑定的数据对象不必内联定义在模板里

    <div id="areaId" class="show_area" v-bind:class="classObj"></div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#areaId",
            data:{
                classObj:{
                    area_status:true,
                    active_status:true,
                    back_status:false
                }
            }
        })
    </script>

    渲染的结果和上面一样。

    （2）数组语法

    v-bind除了接收对象，也可以把一个数组传给 v-bind:class，以应用一个 class 列表：

    <div id="areaId" class="show_area" v-bind:class="[active_class,show_class,area_class]"></div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#areaId",
            data:{
                active_class:'active',
                show_class:'show',
                area_class:'area'
            }
        })
    </script>

    （3）用在组件上（待定/验证）

    当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。例如，如果你声明了这个组件：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

    然后在使用它的时候添加一些 class：

<my-component class="baz boo"></my-component>

    HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p>

    对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

    当 isActive 为 truthy 时，HTML 将被渲染成为：

<p class="foo bar active">Hi</p>

 

【二】绑定内联样式

    （1）对象语法

      ①内联列表绑定

   v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

    <!-- 绑定内联样式 -->
    <div class="inner" v-bind:style="{color:colorValue,fontSize:size+'px',backgroundColor:bgColor}">
        绑定内联样式
    </div>
    var inner = new Vue({
        el:".inner",
        data:{
            colorValue:"white",
            size:18,
            bgColor:"red"
        }
    });

    

   ②内联对象绑定（注意：styleObject两边不加{}）

    <!-- 绑定内联样式 -->
    <div class="inner" v-bind:style="styleObject">
        绑定内联样式
    </div>
    var inner = new Vue({
        el:".inner",
        data:{
            styleObject:{
                fontSize:'12px',
                backgroundColor:'red',
                color:'white'
            }
        }
    });

    （2）数组语法

    内联数组+对象结合绑定，v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

    <div class="inner3" v-bind:style="[fontObj,backObj]">
        绑定内联样式-内联数组绑定(注意：数组时两边是[])
    </div>
    var inner3 = new Vue({
        el:".inner3",
        data:{
            /* 字体-样式对象 */
            fontObj:{
                color:'green',
                fontSize:'30px'
            },
            /* 背景-样式对象 */
            backObj:{
                backgroundColor:'orange'
            }
        }
    })

    （3）自动添加前缀（测试后无效，有待验证）

 

 

 

 

.