vue.js样式绑定

Posted sinceForever

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js样式绑定相关的知识,希望对你有一定的参考价值。

vue.js样式绑定

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset=‘utf-8‘>
        <title>style of vue</title>
        <script src=‘vue.min.js‘></script>
        <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="{active}">

            </div>
        </div>
        <script>
        new Vue({
            el: ‘#app‘,
            data: {
                active: true
            }
        })
        </script>
    </body>
</html>
  • 我们也可以在对象中传入更多属性用来动态切换多个class. text-danger类背景颜色覆盖了active类的颜色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>style of vue</title>
<script src=‘vue.min.js‘></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static"
    v-bind:class="{ active, ‘text-danger‘: hasError }">
</div>
</div>

<script>
new Vue({
el: ‘#app‘,
data: {
    active: true,
    hasError: true
}
})
</script>
</body>
</html>
  • 我们也可以直接绑定数据里的一个对象:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>object of vue style</title>
        <script src="vue.min.js"></script>
        <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
        .text-danger {
            background: red;
        }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="classObject"></div>
        </div>
        <script>
        new Vue({
            el: ‘#app‘,
            data: {
                classObject: {
                    active: true,
                    ‘text-danger‘: true
                }
            }
        })
        </script>
    </body>
</html>
  • 我们也可以在这里绑定返回对象的计算机属性。这是一个常用且强大的模式:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>computed of vue style</title>
        <script src="vue.min.js"></script>
        <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
        .text-danger {
            background: red;
        }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="classObject"></div>
        </div>
        <script>
        new Vue({
            el: ‘#app‘,
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classObject: function() {
                    return {
                        active: this.isActive && !this.error,
                        ‘text-danger‘: this.error && this.error.type === ‘fatal‘,
                    }
                }
            }
        })
        </script>
    </body>
</html>

数组语法

  • 我们可以把一个数组传给v-bind:class,实例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>array of vue style</title>
        <script src="vue.min.js"></script>
        <style>
            .active {
                width: 100px;
                height: 100px;
                background: green;
            }
            .text-danger {
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="[activeClass, errorClass]"></div>
        </div>
        <script>
        new Vue({
            el: ‘#app‘,
            data: {
                activeClass: ‘active‘,
                errorClass: ‘text-danger‘
            }
        })
        </script>
    </body>
</html>
  • errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
 <div v-bind:class="[errorClass ,isActive ? activeClass : ‘‘]"></div>

Vue.js style(内联样式)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line style of vue</title>
<script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:style="{color: activeColor, fontSize: fontSize + ‘px‘ }">vue学习</div>
    </div>
    <script>
    new Vue({
        el: ‘#app‘,
        data: {
            activeColor: ‘green‘,
            fontSize: ‘30‘
        }
    })
    </script>
</body>
<body>
  • 也可以直接绑定一个样式对象,让模板更清晰:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Object of style</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObject">vue 学习</div>
</div>

<script>
new Vue({
el: ‘#app‘,
data: {
    styleObject: {
    color: ‘green‘,
    fontSize: ‘30px‘
    }
}
})
</script>
</body>
</html>
  • v-bind:style可以使用数组将多个样式对象应用到一个元素上:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue style</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">vue 学习</div>
</div>

<script>
new Vue({
el: ‘#app‘,
data: {
    baseStyles: {
    color: ‘green‘,
    fontSize: ‘30px‘
    },
    overridingStyles: {
    ‘font-weight‘: ‘bold‘
    }
}
})
</script>
</body>
</html>

以上是关于vue.js样式绑定的主要内容,如果未能解决你的问题,请参考以下文章

如何利用Vue.js库中的v-bind绑定样式属性

vue.js样式绑定

10.Vue.js 样式绑定

Vue.js:条件类样式绑定

vue样式绑定与事件处理器的基本使用

Vue.js 样式绑定