vue样式绑定

vue 绑定class 和style 有相同的地方，可以是数组和对象，对于class class是真实的在css样式中添加的，只不过在元素中添加需要:class这样代表绑定，然后这个class作为对象的属性，属性值是一个布尔值，在data中定义false class不会显示样式，如果是true,则正常显示样式；在数组中，也是数组的值是属性，属性值是真正的元素class;

style 也是和class一样，可以是数组，也可以是对象

<template>
  <div class="hello">

    <ul>
      <li @click="handleClick"
          :key="item.index"
          v-for="(item,index) in list">{{item}}
      </li>
    </ul>
    <p @click="change" v-text="msg" :class="[active]"></p>
    <p :class="{active:isActive}">{{fullName}}</p>
    <p :style="styObj" @click="handleClickStyle">你好Vue</p>
  </div>
</template>

<script>
  export default {
    props: ['list'],
    data ()
    {

      return {
        msg: 'helloword',
        fistName: 'Dell',
        secondName: 'Lee',
        age: 28,
        isActive:false,
        active:'',
        styObj:{
          color:'black',
          fontSize:'20px'
        }
      }
    },

    methods: {
      change ()
      {
//class 对象
        this.isActive = !this.isActive;
       /* if(this.active ==='active'){
          this.active = ''
        }else {
          this.active ='active'
        }*/
//三元运算符代替上面的if语句
//class 数组
        this.active = this.active ==='active'? "":'active'

      },
//对象绑定样式style
      handleClickStyle(){
        this.styObj.color = this.styObj.color==='black'?'red':'black'
      }
    },