关于vue点击切换element小图标问题

问题出现原因

在通过vue写前端页面时，想要通过点击图标实现图标样式的切换，比如收藏和取消收藏的样式实现。

解决问题思路

我的想法是通过操作dom节点来实现，而在vue中可以通过三种方式来操作节点。
一、原生的js
二、jQuery的方式
三、vue自带方法

解决方法

这里我采用的是第三种方法，因为要使用的地方比较多，于是就将其封装为一个单独的组件，方便使用。

<template>
    <div class="collect">
        <i ref="off" class="el-icon-star-off" @click="change1" style="display: block"></i>
        <i ref="on" class="el-icon-star-on" @click="change2" style="display: none"></i>
    </div>
</template>

<script>
    export default {
        name: "Collect",
        methods: {
            change1() {
                this.$refs.on.style.display = "block";
                this.$refs.off.style.display = "none";
            },
            change2() {
                this.$refs.on.style.display = "none";
                this.$refs.off.style.display = "block";
            }
        }
    }
</script>