Vue.js知识点总结 (动态添加样式)

最新推荐文章于 2024-10-09 11:02:35 发布

A-cod7

最新推荐文章于 2024-10-09 11:02:35 发布

阅读量3.4k

点赞数

分类专栏：前端_Vue.js 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_41136216/article/details/105741020

版权

本文总结了Vue.js中动态添加样式的技巧，包括简单类名绑定、通过v-model改变类名、多类名绑定以及根据输入改变颜色的方法。详细介绍了多种方式，如多个样式绑定、计算属性的使用和数组形式的写法，以实现更灵活的样式控制。

摘要由CSDN通过智能技术生成

简单类名绑定

先来看一个简单实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态添加样式</title>
    <style>
        .first {
    
            background-color: blueviolet;
        }

        .second {
    
            display: block;
            width: 240px;
            height: 240px;
            background-color: rgb(208, 226, 43);
        }

        .third {
    
            display: block;
            width: 640px;
            height: 240px;
            background-color: rgb(43, 116, 226);
        }
    </style>
</head>

<body>
    <script src="../third_party_pack/vue/vue.js"></script>
    <div id="sagasw">
        <div class="first" @click="real=!real" :class="{second:real,third:!real}">123</div>
    </div>
    <script>
        new Vue({
    
            el: '#sagasw',
            data: {
    
                real: false,
            }
        })
    </script