绑定Style样式

绑定style样式的方法

1.对象写法
:style="{fontSize:xxx,color:'red'}" 其中xxx没有加引号是取的js变量中的值是动态的，而red就是一个字符串，是固定的值。
:style="styleObj" 其中styleObj是一个对象，对象的取值在创建的Vue实例中，取得值就是data传入的对象
2.数组写法，可以将多个样式对象应用到同一个元素上
:style="[a,b]" 其中a,b是样式对象

    <div id="app">
        <div :style="{fontSize:fontsize+'px',color:'gold'}">{{msg}}</div>
        <div :style="styleobj">{{msg}}</div>
        <div :style="[box1,styleobj,{color:color}]">{{mes}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                fontsize:"30",
                msg:"style样式",
                mes:"数组样式",
                color:"gold",
                styleobj:{
                    width:"200px",
                    height:"200px",
                    backgroundColor:"blue"
                },
                box1:{
                    fontSize:"20px",
                    fontFamily:"Arial Narrow",
                    marginTop:"10px"
                }
            }
        });
    </script>

当页面中有某一些样式需要动态改变时，可以用style的样式绑定

对class 属性进行绑定

绑定calss样式的方法，v-bind:class指令也可以与普通的 class 属性共存

1.字符串的形式
<div :class="mode"></div>
2.对象写法
<div class="static" v-bind:class="{ box1: isActive, box2: hasError }">
//对象写法是对象属性名就是元素的类名，属性值决定类名是否存在，当属性值是true的时候元素就存在该类名，属性值是false的时候元素就不存在该类名
3.数组写法，把一个数组传给 v-bind:class
<div :class="['mainbox',mode]">{{mes}}</div>
加了引号的mainbox就是类名，mode是变量标识符

    <style>
        .box1 {
            width: 200px;
	    height: 200px;
            background-color: antiquewhite;
        }
        .mainbox {
            width: 200px;
	    height: 200px;
            margin-top: 10px;
            background-color: aqua;
        }
        .changecolor {
            background-color: gold;
        }
    </style>
    <div id="app">
        <div :class="mode">{{msg}}</div>
        <div :class="['mainbox',mode]">{{mes}}</div>
        <div @click="fn" :class="{mainbox:true,changecolor:n}">点我改变背景颜色</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                mode:"box1",
                msg:"1",
                mes:"2",
                n:false
            },
            methods: {
                fn(){
                    this.n=true;
                }
            },
        });
    </script>

总结

:style在标签上直接以对象形式设置、绑定一个对象、数组绑定多个属性在data数据中设置某个样式属性的属性值值。

:class 绑定一个对象，属性值在data数据中控制class的布尔值决定类名是否存在，数组中可以保存多个类名

Vue切换效果的实现(面试)

1.做切换效果的技术：用样式绑定
2.组件或者模块的切换：用动态组件或指令v-if/v-show
3.路由切换：用router