Vue

Vue基础-样式转换

Vue样式转换相关:style转换与class转换

Posted by wang chong on March 31, 2019

样式转换

前端如果不能交互改变css样式的话,那么连咸鱼都不如。

vue改变样式有两种方式:一种是通过内联style改变;一种是通过class改变。

内联style改变

我们都知道v-bind可以为DOM元素绑定属性,既然可以绑定属性,那么就可以绑定style属性,通过style来改变样式。

当DOM元素中同时存在style和v-bind:style的时候,vue会自动的将两个样式进行一个融合,只显示一个。

v-bind:style的值可以书写多个style。例如下面这个就是书写了两个。

<div id="app">
    <div style = "height:100px; width : 100px"
        v-bind:style = "[style1,style2]"
    ></div>
    <button @click = "change">change</button>
</div>
<script>
    new Vue({
        el : "#app",
        data : {
            color : "red",
        },
        // 使用计算属性来监听color的变化来依赖绑定
        computed : {
            style1(){
                return {
                    backgroundColor : this.color,
                }
            },
            style2(){
                return {
                    'border-radius' : "20px",
                }
            }
        },
        methods : {
            change(){
                if(this.color == "yellow") {
                    this.color = "red";
                } else {
                    this.color = "yellow";
                }
            }
        }
    })
    </script>

class改变

因为style中样式的优先级太高,有时候并不建议把样式直接写在style里面,写在class里面更可控。

使用v-bind:class绑定class。

首先定义一些class:

.shape {
    height : 150px;
    width :150px;
    float :left ;
    margin:10px;
}
.circle {
    background-color:red;
    border-radius:50%;
}
.square {
    background-color:blue;
}
.triangele {
    width :0px;
    height : 0px;
}
.up {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid green;

}
.down {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 100px solid yellow;
}
.animation {
    animation : strentch 1.0s ease-out;
}
@keyframes strentch {
    0%{
        transform : scale(0.3);
    }
    50% {
        transform :scale(1);
    }
    100% {
        transform : scale(0.3);
    }
}
隐藏与显示类

v-bind:class 中以对象的形式,类名为属性名,当属性值为true的时候显示,当属性值为false的时候隐藏。

<div id="app">
    <!-- 隐藏或显示类 -->
    <div v-for = "shape in shaps" class="shape" v-bind:class = "{circle : shape.isRound,square :! shape.isRound }"></div>
</div>
<script>
    new Vue({
        el : "#app",
        data : {
            shaps : [
                {isRound : true},
                {isRound : false}
            ],
        }
    })
</script>
转换类名

v-bind:class 中以数组的形式,把数据中的类名添加进来。

 <div id="app">
    <!-- 转换类名 -->
    <div v-for="item in shapsClass" class="shape" v-bind:class="[item.name,item.dirction ? item.dirction : '']"></div>
</div>
<script>
    new Vue({
        el : "#app",
        data : {
            shapsClass : [
                {name : "circle",animation : true},
                {name : "square"},
                {name : "triangele",dirction : "up" ,animation : true},
                {name : "triangele",dirction : "down"}

            ]
        }

    })
</script>
两种方式结合

同时两种方式还可以结合使用,在第二种转换类名的方式里中数组中的值放入对象,就想让以第一种方法嵌套在第二种方法中.

<div id="app">
    <div v-for="item in shapsClass" class="shape" v-bind:class="[item.name,item.dirction ? item.dirction : '', {animation : item.animation}]"></div>
</div>
<script>
    new Vue({
        el : "#app",
        data : {
            shapsClass : [
                {name : "circle",animation : true},
                {name : "square"},
                {name : "triangele",dirction : "up" ,animation : true},
                {name : "triangele",dirction : "down"}

            ]
        }
    })
</script>