Vue---Class与Style绑定

最新推荐文章于 2024-03-17 12:22:11 发布

Listener-1379

最新推荐文章于 2024-03-17 12:22:11 发布

阅读量131

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45965358/article/details/115417370

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章目录

绑定HTML Class
绑定内联样式
- 一.对象语法
- 二.数组语法

绑定HTML Class

一.对象语法（一）

在模板中给v-bind:class传递一个对象，通过对象的操作从而改变css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
    <style type = "text/css">
        .myClass1{
            height:100px;
            width:100px;
            background-color:red;
        }
        .myClass2{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class = "myClass1" :class = "{myClass2 : isTrue}"id = "app"></div>
    <script type = "text/javascript">
        const app = new Vue({
            el : "#app",
            data : {
                isTrue : true,
            }
        })
    </script>
</body>
</html>

二.对象语法(二）

绑定的对象可以不在模板当中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
    <style type = "text/css">
        .myClass1{
            height:100px;
            width:100px;
            background-color:red;
        }
        .myClass2{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class = "myClass1" :class = "classObject" id = "app"></div>
    <script type = "text/javascript">
        const app = new Vue({
            el : "#app",
            data : {
                classObject : {
                    myClass2 : true,
                }
            }
        })
    </script>
</body>
</html>

三.对象语法(三）

绑定一个返回对象的计算属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
    <style type = "text/css">
        .myClass1{
            height:100px;
            width:100px;
            background-color:red;
        }
        .myClass2{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class = "myClass1" :class = "classObject" id = "app"></div>
    <script type = "text/javascript">
        const app = new Vue({
            el : "#app",
            data : {
               isTrue : true,
            },
            computed : {
                classObject : function(){
                    return {
                        myClass2 : this.isTrue,
                    }
                }
            }
        })
    </script>
</body>
</html>

四.数组语法

我们可以在模板中给v-bind:class传递一个数组，通过数组的值动态改变class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        .myClass1{
            height:100px;
            width:100px;
        }
        .myClass2{
            background-color:blue;
        }
    </style>
    <script src = "../js/vue.js"></script>
</head>
<div id = "app" :class = "[Class1, Class2]"></div>
<body>
<script type = "text/javascript">
    const app = new Vue({
        el : "#app",
        data: {
            Class1 : 'myClass1',
            Class2 : 'myClass2',
        }
    })
</script>
</body>
</html>

绑定内联样式

一.对象语法

通过v-bind:style这一个javascript对象来控制样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
</head>
<div id = "app" :style ="{backgroundColor : activeColor, width : activeWidth, height : activeHeight}"></div>
<body>
    <script type = "text/javascript">
        const app = new Vue({
            el: "#app",
            data: {
                activeColor : 'red',
                activeWidth : '100px',
                activeHeight : '100px',
            },
        })
    </script>
</body>
</html>

二.数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上，如下面的样式，一个控制尺寸，一个控制颜色，都加到同一个元素上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
</head>
<div id = "app" :style ="[{backgroundColor : activeColor}, {width : activeWidth, height : activeHeight}]"></div>
<body>
    <script type = "text/javascript">
        const app = new Vue({
            el: "#app",
            data: {
                activeColor : 'red',
                activeWidth : '100px',
                activeHeight : '100px',
            },
        })
    </script>
</body>
</html>

Listener-1379

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---Class与Style绑定

文章目录绑定HTML Class一.对象语法（一）二.对象语法(二）三.对象语法(三）四.数组语法绑定内联样式一.对象语法二.数组语法绑定HTML Class一.对象语法（一）在模板中给v-bind:class传递一个对象，通过对象的操作从而改变css样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title
复制链接

扫一扫

专栏目录