vue——细点

1、动态绑定class

1、最简单对象
  :class="{ 'active': isActive }"
2、数组类型
  :class="[isActive,isSort]"
3、三元运算类型
   :class="[isActive?'active':'']"
    或者
   :class="[isActive==1?'active':'']"
   或者
   :class="[isActive==index?'active':'']"
   或者
   :class="[isActive==index?'active':'otherActiveClass']"
4、数组对象类型
  //前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
  :class="[{ active: isActive }, 'sort']"
  或者
  :class="[{ active: isActive==1 }, 'sort']"
  或者
  :class="[{ active: isActive==index }, 'sort']"

 2、数组替换位置

1、Es6数组元素替换位置：
  解构赋值：
  （注：arr后面必须加分号';',否则会与arr变量合并）
  let arr = [1,2,3];
  [arr[0],arr[1]] = [arr[1],arr[0]]

 3、更改数组/对象数据页面不实时更新问题

1、set方法
  this.$set(this.obj,'key',value)
2、强制更新
 this.$forceUpdate()（在改变数据的后面加上）

 4、自定义element中el-table的表头

 

<el-table-column :render-header="renderHeader"></el-table-column>

methods: {

renderHeader(h, {column,$index}){
        let columnHtml = ''
        if (column.label == '活动时间') {
            columnHtml = `<div>${column.label}<span class="table__th__tip"><i>*</i>（券在页面显示的时间）</span></div>`
        } else {
            columnHtml = column.label
        }
        return h('span', {
            attrs: 'className',
            domProps: {
                innerHTML: columnHtml
            }
        })
    },

}

// 说明
// h相当于vue的createElement函数
//column是当前表头的一些属性
// attrs 设置class

 5、vue路由参数获取、添加、删除

1、获取路由参数
getUrlKey(name){//获取url 参数
        return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
      },

2、修改新增路由参数
 安装依赖 npm i webpack-merge -g
 引入 import merge from 'webpack-merge';
 引用
 this.$router.push({    //修改原有参数
    query:merge(this.$route.query,{'id':'1'})
 })
 
 this.$router.push({    //新增一个参数
    query:merge(this.$route.query,{'teamName':'开发组'})
 })
 
 this.$router.push({    //替换所有参数
    query:merge({},{'teamName':'测试组'})
 })