vuejs代码-class与style绑定-优快云博客

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>class与style绑定</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
    .active {
        background-color: red;
    }

    .error {
        color: green;
    }

    .glory {
        color: blue;
        font-size: 15px;
    }
    </style>
    <script src="E:/JavaScriptLibrary/vue.js"></script>
</head>

<body>
    <div id="vbc1" v-bind:class="{active:isActive, error:hasError}">
        <p>耶稣爱你！</p>
    </div>
    <div id="vbc2" v-bind:class="claErr">
        <p>
            我也爱你~
        </p>
    </div>
    <div id="vbc3" v-bind:class="[claObj,claErr,{glory}]">
        <p>
            荣耀归于他~
        </p>
    </div>
    <div id="vbc4">
        <my-comp class="error"></my-comp>
    </div>
    <!--css属性名可以使用短线或者驼峰式，但是使用驼峰式要用单引号括起来，单位可以放在HTML里或者vue实例中 -->
    <div id="vbc5" v-bind:style="{'font-size':fontSize}">这是绑定内联样式的例子</div>
</body>
<script>
//对象语法
var vbc1 = new Vue({
    el: "#vbc1",
    data: {
        isActive: true,
        hasError: true
    }
})
//对象语法里只能使用一个对象
var vbc2 = new Vue({
    el: "#vbc2",
    data: {
        claObj: {
            active: true
        },
        claErr: {
            error: true
        }
    }
})
//数组语法,可以使用多个对象
var vbc3 = new Vue({
    el: "#vbc3",
    data: {
        claObj: {
            active: true
        },
        claErr: {
            error: true
        },
        glory: true
    }
})
//用在组件上,使用组件需要声明vue实例
//且先声明组件后声明实例
Vue.component('my-comp', {
    template: '<p class="active foo">hi,my brother~</p>'
})
var vbc4 = new Vue({
    el: "#vbc4"
})
//绑定内联样式，基本与绑定class一样
var vbc5 = new Vue({
    el: "#vbc5",
    data: {
        styCol: {
            color: 'blue'
        },
        //驼峰式
        styFont: {
            fontSize: '30px'
        },

        fontSize: "60px"
    }
})
</script>

</html>

转载于:https://my.oschina.net/u/1375322/blog/1579833