vue学习（五）【vue样式绑定：对象或数组】

点击改变文字颜色

第一种：class的对象绑定

<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
<div id="root">
    <!--class对象，注意以下的写法-->
    <div @click="handleDivClick"
         :class="{activated: isActivited}"
    >
        Hello World
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            isActivited: false/*默认置false*/
        },
        methods: {
            handleDivClick: function () {
                this.isActivited = !this.isActivited;/*每次点击让该变量取反*/
            }
        }
    })
</script>

</body>
</html>

第二种方法：通过定义class数组，可以定义多个style。都可以起作用

<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
        }

        .activated_one {
            font-size: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <!--绑定一个class数组，所以数组中可以有多个属性名，当某一个属性值不为空时，那个起作用-->
    <div @click="handleDivClick"
         :class="[activated,activated_one]"
    >
        Hello World
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            activated: "activated",
            activated_one: "activated_one"
        },
        methods: {
            handleDivClick: function () {
                /*activated刚好是style中定义的activated*/
                this.activated = this.activated === "activated" ? "" : "activated";
            }
        }
    })
</script>

</body>
</html>

vue学习（五）【vue样式绑定：对象或数组】第三种：style对象

<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <!--绑定一个class数组，所以数组中可以有多个属性名，当某一个属性值不为空时，那个起作用-->
    <div :style="styleObj"
         @click="handleDivClick">
        Hello World
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            styleObj: {
                color: "black"
            }
        },
        methods: {
            handleDivClick: function () {
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
            }
        }
    })
</script>

</body>
</html>

第四种，style数组

<div :style="[styleObj,{fontSize:'100px'}]"
         @click="handleDivClick">
        Hello World
</div>

vue学习（五）【vue样式绑定：对象或数组】

相关推荐