Vue--class与style

class与style

(1) 绑定HTML Class

- 对象语法
	<div id="app">
        <p class="red">这是一个p段落标签...</p>
        <p :class="{'red':isRed}">这是一个p段落标签...</p>  
        <p class="red" :class="(isBig ? 'big' : '')">这是一个p段落标签...</p>
        <p><button @click="isRed=!isRed">切换class</button></p>
    </div>

- 数组语法
	<p :class="['red',(isBig ? 'big' : '')]">这是一个p段落标签...</p>

(2) 绑定内联样式

• 对象语法

  <p :style="{backgroundColor:background,fontSize:'40px'}">我是p段落标签...</p>
  
   //key名需要采用驼峰式的写法哦，不然会报错的！
   new Vue({
       el:"#app",
       data:{
       	background:"green"
       }
   })
  

• 数组语法

  需要将 font-size =>fontSize

<p :style="[{backgroundColor:background,fontSize:'40px'}]">我是p段落标签...</p>