在Vue中引用图标

添加一个图标按钮：

<div style="flex: 1; font-size: 18px">
  <span :class="collapseBtnClass" //其中绑定了一个class collapseBtnClass就是收缩按钮的名称
style="cursor: pointer" @click="collapse"></span>
</div>

按钮叫什么名称呢就在下面的

export default {
 。。。
  data(){
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
  return{
    tableData: Array(10).fill(item),
  msg:"hello 铁甲小宝",
    collapseBtnClass:'el-icon-s-fold',//这里写想要的按钮的名称el-icon-s-fold
    isCollapse:false
    }
  },

collapseBtnClass:'el-icon-s-fold',//这里写想要的按钮的名称el-icon-s-fold

你需要的按钮可以到element官网的icon图标去直接复制

传送门：组件 | Element 

 当然想要按钮起作用需要在函数中写collapse（）函数，如图：

总结：想要添加图标就先将class绑定到span，并利用@click绑定触发函数的名称，

再到return里面写上class名称，

再在methods里面完善触发函数的内容。

还有不那么复杂的 不绑定span也可以，比如下面这样。

要在王小虎旁边加个向下的图标，则直接

<span>铁甲小宝</span>
<i class="el-icon-arrow-down" style="margin-left: 5px"></i>

style="margin-left: 5px"是指离左边的元素5px。

但是这个图标就只是个图标没有其他作用，只是固定在哪里好看的。

效果如图：