web前端——Vue.js基础学习之class与样式绑定

　　打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究，相比前一篇的 demo，本次内容多了各种样式在里面，变得稍微花哨了些，话不多说，直接上代码吧：

<html>
<head>
    <meta charset="utf-8">
    <title>Vue test</title>
    <style type="text/css">
        body {font-family: Verdana;}
        p { font-family: Times, "Times New Roman", serif;}
        .static.active {color: green; font-size: 35px;}
        div.text-danger {color: red;font-size: 25px;}
        div.active {color: blue;font-family: Verdana;}
    </style>

    <script src="./vue.min.js"></script>
</head>
<body>

<div id="app">
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</div>

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
     <p>class property set.</p>
</div>

<div id="app3" 
     v-bind:class="[activeClass,errorClass]">
     <p>group class property set.</p>
</div>

<div id="app4" v-bind:class="[isActive ? 'active' : 'text-danger']">
    <p>三元表达式加样式</p>
</div>

<div id="app5">
    <my-component v-bind:class="{ active: isActive }"></my-component>    
</div>

<div id="app6">
    <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</p>
    <p v-bind:style="styleObject">对象样式绑定</p>
</div>

<script>

Vue.component('todo-item', {
  template: '<p>todo test.</p>'
})

// 一定要实例化才能用
var app = new Vue({
  el: '#app'
})

// 用类选择器构造一个Vue对象并绑定额外的class属性
var app2 = new Vue({
    el: '.static',
    data: {
        isActive: false,
        hasError: true
    }
})

// 数组语法加 class (因为是从下往上拿样式，所以text-danger的color样式被覆盖)
var app3 = new Vue({
    el: '#app3',
    data: {
        activeClass: 'active',
        errorClass: 'text-danger'
    }
})

var app4 = new Vue({
    el: '#app4',
    data: {
        isActive: true
    }
})

Vue.component('my-component',{
    template: '<p class="static">在已经定义好样式的自定义组件上加样式</p>'
})
var app5 = new Vue({
    el: '#app5',
    data: {
        isActive: true
    }
})

// 绑定内联样式
var app6 = new Vue({
    el: '#app6',
    data: {
        activeColor: '#FF00FF',
        fontSize: 30,
        styleObject: {
            color: '#585858',
            fontSize: '25px'
        }
    }
})



</script>

</body>

</html>

 

posted @ 2016-12-20 15:09  笑叹词穷  阅读(2072)  评论(0)  编辑  收藏  举报