elementUI组件el-dropdown(踩坑)
选择即改变:click选择哪个,就显示当前的值,页面UI显示并伴随css样式的变化。
重点:v-if 和 v-else-if 的搭配使用,缺一不可。
效果图:
文章图片
正确的代码如下:
【elementUI组件el-dropdown(踩坑)】重要提示:
我之前使用的全部是v-if
判断,没有搭配v-else-if
,所以就出现了bug:即
只能点击一次,(然后就失效了)就不能继续点击了。
但是我想要的功能:是能改变之前的选择状态。
所以,才有了下面的代码优化(逻辑上的优化)。
{{resume.phone}}
举报该简历 未标记 已面试 待面试 不合适 未标记 已面试 待面试 不合适
总结:
需要
v-if
和 v-else-if
搭配使用,(完整的判断逻辑)操作起来,才能让显示效果正常到此这篇关于elementUI组件el-dropdown(踩坑)的文章就介绍到这了,更多相关element el-dropdown内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- Blazor组件提交全记录:|Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor组件库)
- vue左右滑动选择日期组件封装的方法
- vue拖拽组件vuedraggable使用说明详解
- 基于Apache组件,分析对象池原理
- 解决vue事件总线$on中获取不到组件实例
- java-GUI编程之AWT组件
- vue|vue父子组件传参使用props
- BootstrapBlazor-ValidateForm|BootstrapBlazor-ValidateForm 表单验证组件
- ASP.NET|ASP.NET Core中的Blazor组件介绍
- Flutter使用RepositoryProvider解决跨组件传值问题