10_Vue中class与style样式绑定

最新推荐文章于 2023-05-26 14:35:30 发布

我要学前端！

最新推荐文章于 2023-05-26 14:35:30 发布

阅读量210

点赞数

分类专栏： Vue2笔记文章标签： javascript vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/min0320/article/details/129614313

版权

Vue2笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

概述

在应用界面中，某个（些）元素的样式是变化的；

class/style绑定就是专门用来实现永泰样式效果的技术。

class 绑定

1.class样式写法:class="xxx”xxx可以是字符串、对象、数组。

字符串写法适用于:类名不确定，要动态获取。

对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。

1 :class='xxx'

2 表达式是字符串：'classA'

3 表达式是对象：{classA:isA,classB:isB}

4 表达式是数组：[classA,classB]

具体内容如下

1.绑定class样式-字符串写法

适用于：样式的类名不确定，需要动态指定

<head>
    <script src="../js/vue.js"></script>
    <style>
        .basic {
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
        .normal {
            background-color: #9bff7f;
        }
        .happy {
            background-color: #ff0055;
        }
        .sad {
            background: #373133
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式-字符串写法  适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal'
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal']
                        //Math.random()的随机值是[0,1)
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            }
        })
    </script>
</body>

2.绑定class样式-数组写法

适用于：要绑定的样式个数不确定、名字也不确定

<head>
    <script src="../js/vue.js"></script>
    <style>
        .basic {
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
        .normal {
            background-color: #9bff7f;
        }
        .happy {
            background-color: #ff0055;
        }
        .sad {
            background: #373133
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式-数组写法  适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal',
                classArr: ['happy', 'sad', 'normal']
            }
        })
    </script>
</body>

可以移除，也可以添加

3.绑定class样式-对象写法

适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .basic {
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
        
        .normal {
            background-color: #9bff7f;
        }
        
        .happy {
            background-color: #ff0055;
        }
        
        .sad {
            background: #373133
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式-字符串写法  适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!-- 绑定class样式-数组写法  适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
        <!-- 绑定class样式-对象写法  适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>

    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal',
                classArr: ['happy', 'sad', 'normal'],
                //样式个数确定，名字确定
                classObj: {
                    happy: false,
                    sad: false
                }
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal']
                        //Math.random()的随机值是[0,1)
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            }
        })
    </script>
</body>

</html>

style样式

:style="{fontsize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<body>
        <div class="basic" :style="styleObj">{{name}}</div>
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀',
                mood: 'normal',
                classArr: ['happy', 'sad', 'normal'],
                //样式个数确定，名字确定
                classObj: {
                    happy: false,
                    sad: false
                },
                styleObj: {
                    fontSize: '40px',
                    backgroundColor: 'orange'
                },
                styleArr: [{
                    fontSize: '40px'
                }, {
                    backgroundColor: 'orange'
                }]
            }}
        })
    </script>
</body>

我要学前端！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10_Vue中class与style样式绑定

Vue中class与style样式绑定概述1. 在应用界面中，某个（些）元素的样式是变化的；2. class/style绑定就是专门用来实现永泰样式效果的技术。class 绑定1.class样式写法:class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定，要动态获取。对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。1 :class='xxx'2 表达式是字符串：'classA'
复制链接

扫一扫