Vue.js学习笔记02

1. 通过属性绑定，为元素设置class类样式

首先定义几个class类。

<style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic;
    }
    .active{
        letter-spacing: 0.5em;
    }
</style>

1.1 直接传递一个数组

<h1 :class="['red','italic']">这是一个很大的h1</h1>

注：使用v-bind绑定class，类名写在中括号中一定要用引号。

1.2 在数组中使用三元表达式

<div id="app">
   <h1 :class="['red','thin','italic',flag?'active':'']">这是一个很大的h1</h1>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag:true
        },
        methods:{}
    });
</script>

1.3 在数组中使用对象

在数组中使用对象，来替代三元表达式，提高代码的可读性

<h1 :class="['red','thin','italic',{'active':flag}]">这是一个很大的h1</h1>

1.4 直接使用对象

在为class使用v-bind绑定对象的时候，对象的属性是类名。对象的属性可以带引号，也可以不带引号，这里没有带引号。属性的值是一个标识符。

<h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个很大的h1</h1>

也可以这样

<div id="app">
    <h1 :class="classObj">这是一个很大的h1</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            classObj:{red:true,thin:true,italic:false,active:false}
        },
        methods:{}
    });
</script>

2. 使用内联样式

2.1 直接在元素上通过:style的形式，书写对象

<h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>

注：属性名中，如果有“-”符号，要用单引号将属性名括起来。

2.2 将样式对象，定义到data中

<div id="app">
    <h1 :style="classObj">这是一个h1</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            classObj:{color:'red','font-weight':200}
        },
        methods:{}
    });
</script>

2.3 在:style中通过数组，引用多个data上的样式对象

<div id="app">
   <h1 :style="[classObj1,classObj2]">这是一个h1</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            classObj1:{color:'red','font-weight':200},
            classObj2:{'font-style':'italic'}
        },
        methods:{}
    });
</script>