Vue中的样式绑定

最新推荐文章于 2024-09-10 18:37:52 发布

学会改变Lxw

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量141

点赞数

分类专栏： Vue学习笔记记录文章标签： vue js css html

本文链接：https://blog.csdn.net/lxw88586390/article/details/107084215

版权

Vue学习笔记记录专栏收录该内容

14 篇文章 0 订阅

订阅专栏

方法一：class的对象绑定

通过修改某个div的class那么来实现css的绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .actived {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @click="handelDivClick" :class="{actived: isActived}">
            hello world
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActived: false
            },
            methods: {
                handelDivClick: function () {
                    this.isActived = !this.isActived;
                }
            }
        })
    </script>
</body>

</html>

方法二：通过class数组来实现样式的变换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .actived {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @click="handelDivClick" :class="[actived]">
            hello world
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                actived: ""
            },
            methods: {
                handelDivClick: function () {
                    this.actived = this.actived === "actived" ? "":"actived";
                }
            }
        })
    </script>
</body>

</html>

方法三：通过div绑定的style属性来修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div :style="styleObj" @click="handelDivClick">
            hello world
        </div>
    </div>

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

</html>