vue+ele 爬坑之路(一)—class

上手Vue已将近三月，在这里记录下我自己遇到的一些问题吧！

class名的修改

1、第一种就是直接绑定

<div class="main-header"></div>

这种样式方便大家直接给标签加样式，不足之处在于无法动态控制class

2、动态绑定

<div v-bind:class="[classA, classB]"></div>

然后在script中

<script>
  export default {
    name: "eventInquery",
    data(){
      return{
        classA:'form-control',
        classB:''
      }
    }
  }
</script>

之后就可以在vue的生命周期函数中对classB进行修改：this.classB="active"，渲染后的html就是

<div class="form-control active"></div>

这种方式比较灵活，可以根据需求动态控制标签

3、三木运算

<div :class="isCollapse ? 'iconfont icon-dianxin1':'iconfont icon-dianxin'">aaaa</div>

<script>
export default {
    name: "eventInquery",
    data(){
      return{
       isCollapse:true,//true/false
       }
    }
  }
</script>

这种方法可以通过页面不同的功能来动态控制标签处于哪种状态，比如

4、列表被点击选中

使用方法为：

<ul class="scroll">
    <li class="clearfix" @click="getDetail(index)" v-for="(item,index) in hotList" :key="item.id" :class=" 
       {'active':ind === index}">
       <p class="clearfix">
        <i :class=[classA,item.classB]>{{item.sort}}</i><span class="text">{{item.content}}</span> <span 
        class="time">{{item.time}}</span>
       </p>
    </li>
</ul>

然后在script中

<script>
  export default {
    name: "eventInquery",
    data(){
      return{
        classA:'icon',
        classB:'red',
        ind:'',
        hotList:[
          {
            id:'0',
            classB:'red',
            sort:'最新',
            content:'民政部开通全国慈善信息公开平台',
            time:'2017/10/12'
          },
          {
            id:'1',
            classB:'blue',
            sort:'通知',
            content:'社会公众查询和监督慈善监督慈善',
            time:'2017/10/12'
          },
          {
            id:'2',
            classB:'green',
            sort:'公告',
            content:'方便社会公众查询和监督慈善 ',
            time:'2017/10/12'
          },
          {
            id:'3',
            classB:'red',
            sort:'最新',
            content:'民政部开通全国慈善信息公开平台',
            time:'2017/10/12'
          }
        ]
      }
    },
    methods:{
      getDetail(index){
        this.ind = index
      }
    }
  }
</script>

渲染后的html页面为

这就是我在使用vue过程中遇到的关于class的问题了，欢迎大家留言建议