样式的绑定

最新推荐文章于 2024-06-03 17:48:06 发布

`秋刀鱼`

最新推荐文章于 2024-06-03 17:48:06 发布

阅读量174

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/s8459/article/details/127357173

版权

绑定style属性

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组

<body>
    <div id="app">
        <!-- 在行内属性中书写样式 -->
        <div style="color:pink; font-size:28px;"> 我是div盒子 </div>

        <!-- 把行内属性改造成对象，以对象的方式绑定style属性 -->
        <!-- 外部增加{};属性值改为字符串;分高改造成逗号;属性名到对象名的改变 -->
        <div v-bind:style=" {color:'green',fontSize:'28px'} ">我是以对象方式div盒子</div>

        <!-- 把属性值改成变量，变量由自己来定义 -->
        <!-- 第一个color是样式名;第二个color是变量名,和data中的数据保持一致 -->
        <div v-bind:style=" {color:color,fontSize:size} ">我是以对象方式div盒子</div>
    </div>

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

    <script>
        new Vue ({
            el:'#app',
            data:{
                color:'green',
                size:'29px',
                
            }

        })

    </script>
</body>

以对象的方式绑定class属性

<style>
        .active {
          width: 200px;  
          height: 200px;
          background-color: coral;
          margin: auto;
          
        }
    </style>
</head>
<body>
    <!-- 以对象方式绑定class属性 -->
    <div id="app">
        <!-- v-bind可以缩写为[:] -->
        <div v-bind:class=" {'active':isActive} "></div>
        <!-- <div :class=" {'active':isActive} "></div> -->

    </div>

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

    <script>
        new Vue ({
            el:'#app',
            data:{
                // 值为true，有属性，值则会显示style样式
                isActive:true
                // 值为false，没属性值，则会隐藏style样式
                // isActive:false

            }
        })

    </script>

以对象的方式绑定class及作业

<style>
        .box {
            width: 200px;
            height: 200px;
            border: 5px solid #000;
            margin: auto;
        }
        .active {
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" v-bind:class=" {active:isActive} "></div>
        <!-- 想要动态的设置class,也是给一个对象 -->
        <!-- 属性名：就是类名 -->
        <!-- 属性值：就是布尔值，如果为true就代表有这个类名;false代表没有 -->
        
        <!-- 按钮案例 -->
        <button @click="btn">我是一个按钮</button>
    </div>
   
    <script src="../vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                isActive: false,
               sss:0
            },
            methods:{
                btn() {
                    if(this.sss == 0){
                        this.isActive = true
                        // this.sss = 1;
                    } else {
                        this.isActive = flase;
                        this.sss = 0;
                    }
                }

            }
        })
       
    </script>

`秋刀鱼`

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式的绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组
复制链接

扫一扫