vue.js样式绑定

时间：2017-09-30 20:03:27 阅读：276 评论：0 收藏：0 [点我收藏+]

标签：code array min == height 结果类型 idt 添加动态

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样式绑定

标签：code array min == height 结果类型 idt 添加动态

原文地址：http://www.cnblogs.com/sinceForever/p/7615818.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行