vue+ele 爬坑之路class(一)

说到vue，估计很多人都不陌生了，而且在当前一堆框架中，算是容易上手的了，但仍旧不能掉以轻心，在这里，就先细说我的爬坑之路吧。在这里，我用的是vue+element，希望有同样使用这个搭配的朋友们能一起提出更完善的改进建议。
class名的修改
在vue中，class名有多种方式可以添加到标签上面去，第一种，就是直接绑定，比如：

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

但是单纯的这种形式已经满足不了页面的功能需求了，有的时候需要动态绑定class名，这个时候，可以用这种形式
<div v-bind:class="[classA, classB]"></div>
然后在script中

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

之后就可以在vue的生命周期函数中对classB进行修改：this.classB="active"，渲染后的html就是
<div class="form-control active"></div>
在vue中class同样支持三木运算

<div :class="isclass?classA:classB">aaaa</div>

<script>
export default {
    name: "eventInquery",
    data(){
      return{
       isclass:true,
        classA:'red',
        classB:'blue'
       }
    }
  }
</script>

渲染后的html页面:

<div class="red">aaaa</div>

在这之外，我们还会有一种情况，就是列表选中问题，即标签的选中状态，

 使用方法为：

<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>

好了，这就是我在使用vue过程中遇到的关于class的问题了，欢迎小伙伴留言建议，但凡有用的建议，我这里都会进行尝试使用并及时更新