hello world切换变色
第一种样式和数据绑定的方案
借助class和一个对象的形式，来做样式和数据绑定
语法：class的对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>
<style>
    .activated {
        color: deeppink;
    }
</style>
<body>
<!--vue接管的div-->
<div id="root">
    <div @click="handleDivClick"
         :class="{activated: isActivated}"
    >
        hello world
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            isActivated: false
        },
        methods: {
            handleDivClick: function () {
                this.isActivated = !this.isActivated
            }
        }
    });
</script>
</body>
</html>

Vue中的样式绑定_html


class可以和一个数组相绑定，数组里面写一个内容，内容就相当于变量，class会显示变量显示的内容，既然是一个数组，可以写一个变量也可以写多个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>
<style>
    .activated {
        color: deeppink;
    }
</style>
<body>
<!--vue接管的div-->
<div id="root">
    <div @click="handleDivClick"
         :class="[activated]"
    >
        hello world
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            activated: ""
        },
        methods: {
            handleDivClick: function () {
                this.activated = this.activated === "activated" ? "" : "activated";
            }
        }
    });
</script>
</body>
</html>

style第一种用户对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>

<body>
<!--vue接管的div-->
<div id="root">
    <div :style="styleObj" @click="handleDivClick"
    >
        hello world
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            styleObj: {
                color: "red"
            }
        },
        methods: {
            handleDivClick: function () {
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
            }
        }
    });
</script>
</body>
</html>

style第二种方式数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>
<body>
<!--vue接管的div-->
<div id="root">
    <div :style="[styleObj]" @click="handleDivClick"
    >
        hello world
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            styleObj: {
                color: "red"
            }
        },
        methods: {
            handleDivClick: function () {
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
            }
        }
    });
</script>
</body>
</html>