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

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

vue点击切换css样式
vue动态点击切换css样式 <template><div v-for="i in 5" class="el-personal" :class ...
vue 点击切换导航标签，并左右滚动
vue做的导航栏,左右各有按钮,点击向左右滚动 vue做的导航栏,左右各有按钮,点击向左右滚动 Vue - 点击导航栏当前标签后变色功能(导航栏当前hover样式) Vue - 点击导航栏当前标签后变 ...
vue 中点击切换图标，切换选中状态
很多新手小白做这个切换下拉列表,选中列表记录当前选中状态,图标也变成当前选中状态的时候都会比较绕,其实其核心就是把(icon图标.样式加载变成变量话,按需加入想要的变量即可) 例如下面这个例子: &l ...
vue点击切换类名_vue 新用户引导（vue-dirver）
最近公司经理让我在项目上做一个新用户引导,讲真这玩意我只在APP上看见过,网页上没啥功能啊,还需要引导! 没办法,刚它!!! 在网上查了点资料 Vue 基本上都是 intro.js 和 driver. ...
vue限制点击次数_vue点击切换颜色限制个数（用了mui框架）
vue点击切换颜色只能点击一个修改资料--类别类别保存 {{item.msg}} 最多可选择三项 mui.init() var categroy = new Vue({ el:'#categr ...
小图标文字对齐的终极解决方案
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5264 一.一切从l ...
vue---点击切换不同的图片
vue-点击切换不同的图片点击前点击后: 可以来回切换----- html: <div class="layOut" @click=&q ...
企业微信左侧显示“小图标，大文字”
场景企业微信默认左侧为"大图标,小文字",但是这几个图标的辨识度真得不咋滴,尤其是文档和会议,真不好区分. 解决方案切换成"小图标,大文字" 选中蓝色竖条的 ...
html网站雪碧图素材,webpack雪碧图实现（webpack管理小图标素材）
雪碧图也叫CSS精灵, 是一CSS图像合成技术,这里介绍webpack实现雪碧图这是我的文件目录: // 在上个实例项目上增加了icons文件夹: // dist/sprites/目录是后面执行we ...

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

问题出现原因

解决问题思路

解决方法

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

最新文章

热门文章