vue系列学习笔记_____类与样式绑定

数据绑定一个常见需求是操作元素的class列表和它的内联样式

因为他们都是attribute，我们可以用v-bind处理他们:只需要计算出表达式最终的字符串

不过，字符串拼接麻烦又容易错，

因此，在v-bind用于class和style时，Vue.js专门增强了它。

表达式的结果类型除了字符串之外，还可以是对象或者数组。

1.绑定HTML Class

尽管可以用Mustache标签绑定class，比如class="{{className}}",

但是不推荐这种写法和b-bind:class混用。

两者只能选择其中一个

   （1）对象语法

            例子1

            <div class = "static" v-bind:class="{'class-a':isA,'class-b':isB}"></div>

            data:{

                isA:true,

                isB:false

            }

            <div class ="static class-a"></div>

            例子2:

            <div class = "head" v-bind:class="{'face':isFace,'msg':isMsg}">{{innerText}}</div>

            var dataList = {

                    innerText:'大家好，欢迎来到麦子学院!',

                    isFace:true,

                    isMsg:false

            };

            new Vue({

                el:'div',

                data:dataList

            });

            setTimeout(function(){

                dataList.isFace = false;

                dataList.isMsg = true;

            },2000);

            我们可以看到 v-bind:class 指令可以与普通的class特性共存

            当isA 和isB变化时，class列表将相应地更新。

            例如，如果isB变为true，class将变为"static class-a class-b"

            直接绑定数据里的一个对象:

            <div v-bind:class="classObject"></div>

            data:{

                classObject:{

                    'class-a':true,

                    'class-b':false

                }

            }

   （2）数组语法

        把一个数组传给v-bind：class,以应用一个class列表

        <div v-bind:class="[classHead, classFace]">{{ innerText }}</div>    

var dataList = {
    innerText: '大家好，欢迎来到麦子学院！',
    classHead: 'head',
    classFace: 'face',
    classMsg: 'msg'
};
new Vue({
    el: 'div',
    data: dataList
});

根据条件切换到列表中的class，可以用三元表达式

 <div b-bind:class="[classA,isB?classB:'']">

<div v-bind:class="[classA,{classB:isB,classC:isC}]"></div>

2.绑定内联样式

  (1).对象语法

        v-bind:style对象语法十分直观，看着像css的javaScript对象。css属性名可以用驼峰式获短横分隔命名:

        <div v-bind:style=" {color:activeColor,fontSize:fontSize+'px'}"></div>

        data:{

            activeColor:'red',

            fontSize:30

        }

        直接绑定到一个样式对象，让模板更清晰

        <div v-bind:style="styleObject"></div>

        data:{

            styleObject:{

                color:'red',

                fontSize:'13px'

            }

        }

  (2).数组语法

        v-bind:style的数组语法可以将多个样式对象应用到一个元素上；

        <div v-bind:style="[styleObjectA,styleObjectB]"></div>

  (3).自动添加前缀

        浏览器版本。。。