Vue学习（二）：class与style绑定 

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>class与style绑定</title>
    <style type="text/css">
        .static {
            font-weight: bold;
        }

        .class-a {
            color: blue;
        }

        .class-b {
            font-size: 22px;
        }
    </style>
</head>
<body>
<!--1.绑定 HTML Class-->
<!--对象语法-->
<div id="example1" class="static" v-bind:class="{'class-a': isA, 'class-b': isB}">Hello Vue.</div>
<!--数组语法-->
<div id="example2" class="static" v-bind:class="[classA, classB]">Hello Vue.</div>
<div id="example3" class="static" v-bind:class="[classA, isB ? classB : '']">Hello Vue.</div>

<!--2.绑定内联样式-->
<!--对象语法-->
<div id="example4" class="static" v-bind:style="{color: activeColor, 'font-size': fontSize + 'px'}">Hello Vue.</div>
<div id="example5" class="static" v-bind:style="styleObject">Hello Vue.</div>
<!--数组语法-->
<div id="example6" class="static" v-bind:style="[styleObjectA, styleObjectB]">Hello Vue.</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
    // example 1
    let vm1 = new Vue({
        el: '#example1',
        data: {
            isA: true,
            isB: false
        }
    });
    console.log(vm1.$el);

    // example 2
    let vm2 = new Vue({
        el: '#example2',
        data: {
            classA: 'class-a',
            classB: 'class-b'
        }
    });
    console.log(vm2.$el);

    // example 3
    let vm3 = new Vue({
        el: '#example3',
        data: {
            classA: 'class-a',
            classB: 'class-b',
            isB: false
        }
    });
    console.log(vm3.$el);

    // example 4
    let vm4 = new Vue({
        el: '#example4',
        data: {
            activeColor: 'red',
            fontSize: '30'
        }
    });
    console.log(vm4.$el);

    // example 5
    let vm5 = new Vue({
        el: '#example5',
        data: {
            styleObject: {
                color: 'red',
                fontSize: '25px'
            }
        }
    });
    console.log(vm5.$el);

    // example 6
    let vm6 = new Vue({
        el: '#example6',
        data: {
            styleObjectA: {
                color: 'blue',
                fontSize: '35px'
            },
            styleObjectB: {
                'text-decoration': 'underline'
            }
        }
    });
    console.log(vm6.$el);
</script>
</body>
</html>

结果：

 

 

posted @ 2018-12-11 10:57  寒爵  阅读(283)  评论(0)  编辑  收藏  举报