Vue 样式绑定（十）

最新推荐文章于 2024-07-31 19:07:25 发布

Yee Jason

最新推荐文章于 2024-07-31 19:07:25 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_38287952/article/details/88091385

vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细探讨了Vue.js中如何进行样式绑定，包括类样式绑定、内联样式绑定以及条件和动态样式的应用，帮助开发者更好地理解和运用Vue的样式绑定特性来实现组件的动态样式管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、class 
      第一种：对象绑定    
      :class="{activated: isActivated}"
      第二种：数组绑定
      :class="[activated, activatedOne]"
二、style 
     第一种：对象绑定
     :style="styleObj" // obj
     第二种：数组里嵌套多个对象绑定
     :style="[styleObj, {fontSize:'22px'}]"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的样式绑定</title>
    <script src="../vue.js"></script>
    <style>
        .activated {
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<div @click="handleClick"
             :class="[activated, activatedOne]"
        >
            Hello world
        </div>-->

        <!--<div :style="styleObj" @click="handDivClick">
            Hello world
        </div>
-->
        <div :style="[styleObj, {fontSize:'20px'}]" @click="handDivClick">
            Hello world
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data : {
              /*  activated: "",
                activatedOne: "activated-one",*/
                styleObj: {
                    color: "black"
                }
            },
            methods: {
                handDivClick: function () {
                    this.styleObj.color = this.styleObj.color === 'red' ? "black" : 'red';
                },
                handleClick: function() {
                    //this.isActivated = !this.isActivated;
                  /*  if (this.activated === 'activated') {
                        this.activated = '';
                    } else {
                        this.activated = "activated";
                    }*/

                    //this.activated = this.activated ===  'activated' ? "" : 'activated';

                }
            }
        });
    </script>
</body>
</html>