VUE框架使用数组和对象绑定的形式实现对class的绑定效果达到动态css样式------VUE框架

已于 2023-11-30 12:32:52 修改
阅读量992 收藏 20
点赞数 23
分类专栏： # VUE框架 前端 文章标签： vue.js javascript ecmascript vue 前端框架 前端 js
于 2023-11-29 11:43:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134686237
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .static
        {
            border: 1px solid black;
            background-color: aquamarine;
        }
        .big
        {
            width: 200px;
            height: 200px;
        }
        .small
        {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 静态写法 -->
        <div class="static small">{{msg}}</div>
        <br><br>
        <button @click="changeBig">变大</button>
        <button @click="changeSmall">变小</button>
        <!-- 动态写法 -->
        <div class="static" v-bind:class="c">{{msg}}</div>
        <!-- 对象方式实现 -->
        <div class="static" v-bind:class="classObj">{{msg}}</div>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                c : "big",
                classObj : {
                    'big' : false,
                    'small' : true
                }
            },
            methods : {
                changeBig()
                {
                    this.c = "big";
                },
                changeSmall()
                {
                    this.c = "small";
                },
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

    <style>

        .static

        {

            border: 1px solid black;

            background-color: aquamarine;

        }

        .big

        {

            width: 200px;

            height: 200px;

        }

        .small

        {

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <!-- 静态写法 -->

        <div class="static small">{{msg}}</div>

        <br><br>

        <button @click="changeBig">变大</button>

        <button @click="changeSmall">变小</button>

        <!-- 动态写法 -->

        <div class="static" v-bind:class="c">{{msg}}</div>

        <!-- 对象方式实现 -->

        <div class="static" v-bind:class="classObj">{{msg}}</div>

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                c : "big",

                classObj : {

                    'big' : false,

                    'small' : true

                }

            },

            methods : {

                changeBig()

                {

                    this.c = "big";

                },

                changeSmall()

                {

                    this.c = "small";

                },

            }

        });

    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .static
        {
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }
        .active
        {
            background-color: green;
        }
        .text-danger
        {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 静态写法 -->
        <div class="static active text-danger">{{msg}}</div>
        <!-- 动态写法 -->
        <div class="static" v-bind:class="['active','text-danger']">{{msg}}</div>
        <!-- 数组写法 -->
        <div class="static" v-bind:class="[c,c1]">{{msg}}</div>
        <!-- 全数组写法 -->
        <!-- 这种情况最常用,当样式的个数不确定,并且样式的名字也不确定的时候使用 -->
        <!-- 可以采用数组,实现压栈和出栈的方式实现效果动态 -->
        <div class="static" v-bind:class="classArray">{{msg}}</div>
        <!-- 对象方式实现 -->
        <div class="static" v-bind:class="classObj">{{msg}}</div>
        <!-- 手动对象形式 -->
        <div class="static" v-bind:class="{'active':true,'text-danger':true}">{{msg}}</div>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                c : 'active',
                c1 : 'text-danger',
                classArray : ['active','text-danger'],
                // 当样式格式个数可以确定,不能确定是否用这个样式的时候我们用这种方式实现
                classObj : {
                    // 该对象的属性名字必须与样式的属性名字对应
                    'active' : false,
                    'text-danger' : true
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

    <style>

        .static

        {

            border: 1px solid black;

            width: 100px;

            height: 100px;

        }

        .active

        {

            background-color: green;

        }

        .text-danger

        {

            color: red;

        }

    </style>

</head>

<body>

    <div id="app">

        <!-- 静态写法 -->

        <div class="static active text-danger">{{msg}}</div>

        <!-- 动态写法 -->

        <div class="static" v-bind:class="['active','text-danger']">{{msg}}</div>

        <!-- 数组写法 -->

        <div class="static" v-bind:class="[c,c1]">{{msg}}</div>

        <!-- 全数组写法 -->

        <!-- 这种情况最常用,当样式的个数不确定,并且样式的名字也不确定的时候使用 -->

        <!-- 可以采用数组,实现压栈和出栈的方式实现效果动态 -->

        <div class="static" v-bind:class="classArray">{{msg}}</div>

        <!-- 对象方式实现 -->

        <div class="static" v-bind:class="classObj">{{msg}}</div>

        <!-- 手动对象形式 -->

        <div class="static" v-bind:class="{'active':true,'text-danger':true}">{{msg}}</div>

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                c : 'active',

                c1 : 'text-danger',

                classArray : ['active','text-danger'],

                // 当样式格式个数可以确定,不能确定是否用这个样式的时候我们用这种方式实现

                classObj : {

                    // 该对象的属性名字必须与样式的属性名字对应

                    'active' : false,

                    'text-danger' : true

                }

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 23
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一文读懂vue动态属性数据绑定（v-bind指令）
10-15
总之，`v-bind` 指令是 Vue 中实现数据驱动界面的重要工具，它允许你动态地绑定元素的各种属性，包括 `class` 属性，使得你的应用更具交互性和动态性。通过对象语法和数组语法，你可以灵活地控制元素的 CSS 类，实现...
详解vue中v-model和v-bind绑定数据的异同
10-14
例如，使用 `v-bind:class` 可以动态地改变元素的CSS类，根据数据状态呈现不同的样式。当Vue实例中的`data.classed`改变时，元素的`class`属性会相应更新。同样，对于图片的`src`属性，可以通过 `v-bind:src` 或简写...
Vue起步之动态CSS
qq_35723619的博客
11-07 252
1.动态Css html app04.js css 2.V-if html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue.js&lt;/title&gt; &lt;link
Vue 通过style属性、class属性来动态修改CSS样式
热门推荐
weixin_43818307的博客
07-11 2万+
vue使用v-bind绑定style属性或class属性，动态修改CSS样式。动态修改style，动态修改class。
VUE3 学习笔记（5）：数组处理、计算属性与函数、class与Style绑定
最新发布
众纳百川的博客
05-28 309
-- 直接使用计算属性调用只调用一次 -->-- 但是方法则每次调用都会计算 -->data(){return{isOk:true},computed:{},methods:{
Vue 动态改变css
LeeBingNing的博客
03-16 1万+
两种方式动态改变css
vue动态设置css的方法
记不住代码的前端混子
04-23 515
:style="{ '--color': color, '--fontSize': fontSize }" 可以直接定义全局样式
前端Vue日常工作中--动态css类
前端工作学习中
12-06 3065
Vue.js 允许你在动态地设置 CSS 类、样式等方面非常灵活。
Vue v-bind动态绑定class实例方法
10-15
动态绑定`class`主要分为三种方式：对象语法、数组语法和字符串语法。我们先来看看对象语法，这也是最常用的绑定方式。 ### 对象语法绑定 在对象语法中，我们传递一个JavaScript对象，键是CSS类名，值是布尔值。...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
1. **动态绑定类名**：在循环的元素上使用`:class`指令并传入一个数组。例如，对于四个盒子，我们可能有如下代码： ```html <div v-for="(i, a) in serve" class="sever_box2"> <div :class="sstt[a]"> <!-- 其他...
vue动态改变当前样式(css)
95后独自打拼的程序猿
03-20 4097
文章目录前言一、要怎么做？二、使用步骤1.首先，在data中要有样式数据2.在computed中添加这段代码3.在需要改变样式的地方添加总结 前言 例如：项目中我们需要动态改变当前页面的样式 一、要怎么做？ 示例：1.首先我们要拿到数据中背景图数据 2.然后在你需要的添加背景图div出添加定义的style 二、使用步骤 1.首先，在data中要有样式数据 代码如下（示例）： data: { //动态背景图片 leftStyle: { background: "#AF7F3F" } } 2.在c
vue中动态改变css式样
qingdatiankong的博客
09-19 270
记录vue中动态修改css式样，代码的写法，
vue之class绑定数组形式
seimeii的博客
04-27 1286
1.html结构 <div id="app"> //这里填写的是data里的key值 <div :class="[activeClass,errorClass]">测试样式</div> <button @click="handle">切换</button> </div> 2.style <style> .active {
vue 中 如何动态修改css样式内容
longwen999的专栏
06-13 6871
vue 中 如何动态修改css样式内容
Vue 动态改变css样式的方法总结
飞翔༒之翼
04-21 2895
在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue里如何实现呢？官网上其实写的很详细了，对象语法，数组语法等。我自己总结了在开发中，个人用的比较多的三种方式。
vue10-class数组样式绑定
徐海兴的专栏
09-23 4267
首先看代码 &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Hello world&lt;/title&gt; &lt;script src="vue.js"&gt;&l
vue使用对象以及数组对class进行操作，以及js对数组的各种操作，以及高阶函数
qq_42877655的博客
10-27 672
使用对象以及数组对class进行操作 对象语法 html >>>>>> <div :class="{ccc:isClass}"></div> <div :class="{ccc:isClass,bbb:!isClass}"></div> <div class="aaa" :class=...
Vue动态切换class属性：数组法、对象法
YY的博客
11-20 3112
Vue动态切换class属性：数组法、对象法
vue基础-Class介绍
weixin_43010844的博客
12-11 3113
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表因为class是 attribute，我们可以和其他atribute 一样使用v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue专门为class的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是或。
vue中使用v-bind:placeholder和v-model动态动态绑定同一个值，修改placeholder的样式
04-24
可以通过给对应的 input 元素设置类名，然后在 CSS 样式中通过 .类名::placeholder 来修改 placeholder 的样式，例如： HTML 代码： ```html type="text" v-model="inputValue" :placeholder="inputValue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值