vue动态绑定 iconfont中引用的class类问题处理，问题描述（iconfont引用的时候会包含两个类名，类名中间有空格）

问题描述:

今天在开发一个 APP 的时候，想实现一个功能：

先上图吧！！！

看到 圈起来 的那个没。我点击那个之后，向上的箭头改变方向朝下，然后下面 整个 第三方登录 会消失，给下面部分绑定了 v-show，变成下图！

看到没，箭头已经向下，并且 下面整个 第三方登录 已经隐藏起来了。然后遇到的问题是什么呢，大家 知道 vue 动态绑定 class 类名吧，我用的 iconfont 就是采用 引入的类名，所以，我只需要 iconfont的类名，动态绑定到 那个 <span>第三方登录<i :class="此处为动态值"></i></span>。 这样没问题吧。但是没法，因为iconfont 的类名中间有空格，绑定上去的时候就会少一个主类名。本应该是<i class="icon iconxxx"><i> 。。结果会变成 <i class="iconxxx"></i> ，缺少前面那个主类名，引入的结果就是 那个图标会变成 一个 方框！！！！还有注意，iconfont 默认的子类名为  icon- ，这个不行。可能是因为后面那个 ”-“ 造成的，你可以改为任何一个字母，最好不要符号。

解决方法：

我用的是，把 iconfont 需要的 class类，存为变量，放在 data 里面，因为如果class的类名是变量的话，编译的时候两个变量之间就会有空格，就是一个完整的类名了。然后，在 点击 第三方登录 的时候，用三元表达式 动态为 <i><i> 添加类名；代码如下

// 这是个 三元表达式， 不懂看vue官网的 动态绑定class，那三个都是变量，建议你先看下一段代码
<span>第三方登录<i :class="[flag ? trueflag : falseflag,letclass]" @click="checkturn"></i></span>

data() {
    return {
      flag:false, //控制第三方登录显示和隐藏
      trueflag:'iconaxiangshang', //将iconfont获得的类名 存为变量，图标箭头向上
      falseflag:'iconaxiangxia', 将iconfont获得的类名 存为变量，图标箭头向下
      letclass:'icon' // 这个是 iconfont 类名的主类
    };
  },
  methods:{
    checkturn(){ // 注册的事件
      this.flag = ! this.flag //控制显示与隐藏
    }
  }

后面的话问题就差不多解决了，其余的就是图标大小的问题，因为单页面所有的iconfont图标都属同一个类，注意观察！！

这个问题我百度了很久  发现没有这个问题的解决方法，所以我迈出了第一步。

希望大家  给个赞呀！！！！！！

给个双击么么哒~~~~~~~~~~~