Vue js样式绑定

blockchain beginner

已于 2022-11-14 19:34:58 修改

阅读量363

点赞数

文章标签： javascript vue.js 前端

于 2022-11-05 16:17:47 首次发布

本文链接：https://blog.csdn.net/qq_45783437/article/details/127704431

版权

Vue.js class

class属性绑定

Vue.js style (内联样式)

Vue.js class

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

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

class属性绑定

作用:可以为 v-bind:class 设置一个对象，从而动态的切换 class

语法:class="{‘属性名’：‘属性值’}" 属性名就是生效的类名值为布尔值，true生效，false不生效

实例

    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        .bg{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 想要动态的设置class，也是要给一个对象 -->
        <!-- 属性名就是类名 -->
        <!-- 属性值：就是布尔值。如果为true就代表有这个类名；false就代表没有 -->

        <div class="box " :class="{bg:isb}"></div>
        点击按钮会改变div的背景颜色
        <button @click="yell">点击</button>
    </div>
    <script src="/vue.js"></script>
    <script>
        
        new Vue({
            el:'#app',
            data:{
                isb:false,
                if:0
            },
            methods: {
                yell(){
                    if(this.if==0){
                        this.isb=true
                        this.if=1
                    } else{
                        this.isb=false
                        this.if=0
                    }
                }
            },
        })
    </script>

Vue.js style (内联样式)

把行内属性改成对象，以对象方式绑定style属性

外部增加 { }：属性值改造成字符串；分高改造成逗号；属性名到对象名的改变

要遵守驼峰命名法

1. 直接设置样式

<div class="static" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">:style样式</div>

<style>
    new Vue({
        el:#app,
        data:{
                activeClor:'blue',
                fontSize:20
        },
    })
</style>

2.直接绑定到一个样式对象

<div class="static" v-bind:style="styleObject">:style样式</div>
<style>
    new Vue({
        el:#app,
        data:{
               styleObject:{
                    color:'blue',
                    fontSize:'20px'
            }
        }
    })
</style>

3.用数组的方式将多个样式对象应用到一个元素上

<div class="static1" v-bind:style="[baseStyles, overridingStyles]">数组形式添加内联样式。</div>

<style>
    new Vue({
        el:#app,
        data:{
            baseStyles:{
                backgroundColor:'blue',
                color:'#F000'
            },
            overridingStyles:{
                border:'10px'
          },
        }
    })
</style>