element的switch标签踩坑

最新推荐文章于 2024-03-29 17:00:57 发布
最新推荐文章于 2024-03-29 17:00:57 发布
阅读量350 收藏
点赞数 2
分类专栏： 前端 JavaScript 文章标签： vue.js element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40787608/article/details/125341176
版权

element的switch标签是默认是使用布尔值来区分状态的，但是有时候后台给我们传的是数字，例如：1代表正常，0代表冻结等等，如果我们想要用数字代替布尔值需要加两个属性

:active-value="1"
:inactive-value="0"

**注意：**如果后台给我们传的1和0是字符串型的话，这两个属性是不需要加上冒号的，要这样写

active-value="1"
inactive-value="0"

如果后台传的值是整形数字，不加上冒号是不生效的

万猿丛中最秃的帅哥
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自己动手用单纯css与一个input标签实现一个switch开关
en__ne的博客
02-23 2355
用了别人那么久的组件，自己也写一个吧
elementUI的el-switch的使用
热门推荐
m0_46581222的博客
09-08 1万+
工作记录 背景：el-switch绑定值的问题 第一种： v-model绑定布尔值 <template> <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </template> <script> export default { name: "hom
element-ui中Switch组件以数字判断开关状态
Yunwushenyanying的博客
12-13 987
element-ui中Switch组件以数字判断开关状态
vue-element-switch用法
Tel_17674647975的博客
10-20 967
新学习的内容知识，自己记录下
element ui el-switch用数字表示是开关
weixin_40030173的博客
09-03 920
<template> <div> <el-switch v-model="val" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" /> </div> </template> <script> export default{ data(){ return{
Element-UI踩坑之Pagination组件的使用
10-17
主要介绍了Element-UI踩坑之Pagination组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于element-ui标签选项卡
06-24
基于 Element UI 的标签选项卡是实现网页或应用程序中内容分块和切换的重要工具，能够帮助用户更有效地管理和浏览多部分内容。 选项卡是一种常见的用户界面元素，它允许用户在多个相关的视图之间切换，而无需在页面...
vue-element-admin 菜单标签失效的解决方式
10-16
在Vue.js开发中，特别是使用基于Vue的框架如vue-element-admin时，可能会遇到菜单标签失效的问题。这种情况通常出现在用户在切换不同的路由时，菜单栏的选中状态没有正确地保持，或者页面之间的缓存处理不当导致。...
基于element-ui标签选项卡特效代码
03-20
在"基于element-ui标签选项卡特效代码"这个项目中，我们关注的重点是Element UI中的选项卡（Tabs）组件，它是实现页面内容分块和切换的常用工具。 选项卡组件在网页设计中广泛使用，它允许用户通过点击不同的标签来...
多种element-ui标签选项卡插件
06-09
在使用Element-UI的标签选项卡功能之前，首先需要确保已经安装了Element-UI库。通过npm或yarn进行安装： ``` npm install element-ui --save # 或者 yarn add element-ui ``` 然后在项目入口文件（如`main.js...
自定义标签-拖拽功能实现
12-25
在这个主题中，我们将深入探讨如何利用 Element UI 实现自定义标签的拖拽功能。 首先，自定义标签（Customized Tags）是一种允许用户创建和管理他们自己的标签的方式，常见于笔记应用、项目管理工具等。实现自定义...
ElementUI Tag组件实现多标签生成的方法示例
01-19
现在好多应用场景里会有一些需要给文章打标签等类似的操作，之前jquery用户是使用taginput来实现，使用VUE以后elementui有一个组件非常简单就是tag组件。 v-for=tag disable-transitions=false close=handle...
html 块级标签与内联标签的区别
12-13
1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, div, ul等; 2. Inline element: 指依附其他块级元素存在, 紧接于被联元素之间...
element深色系资源
08-01
Element UI 是一款基于 Vue.js 的开源 UI 组件库，它提供了丰富的界面元素和设计模式，用于构建美观且响应式的 Web 应用。深色系主题是 Element UI 提供的一种视觉风格，适合在低光照环境下或者对视力保护有需求的...
element离线手册2.15.8版本
05-16
Element UI 是一个基于 Vue.js 的开源组件库，主要用于构建企业级的 Web 应用界面。在2.15.8这个版本中，它提供了一系列经过精心设计和优化的UI组件，如按钮、表格、对话框、通知、布局等，使得开发者能够快速、高效...
element-ui switch 组件源码分享
qq_37309987的博客
03-29 804
2.5 inactive-icon-class 属性，switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text，类型 string，无默认值。2.9 inactive-value 属性，switch 关闭时的值，类型 boolean / string / number，默认 false。2.8 active-value 属性，switch 打开时的值，类型 boolean / string / number，默认 true。4.1 focus 事件，使 Switch 获取焦点。
elementUi中的Switch标签设置文字描述的显示位置、scoped相关知识
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
10-18 1864
elementUi中的Switch标签设置文字描述的显示位置、scoped相关知识
element-ui中switch开关回显问题
eggplantttttt的博客
09-27 1028
active-value 和 inactive-value 前有冒号为number类型。无冒号为string类型。
element Switch开关 状态开关实现
weixin_44231395的博客
05-05 3871
开关的实现 总： <el-table :data="userlist" border stripe> <el-table-column type="index" label="#"></el-table-column> <el-table-column prop="username" label="姓名"></e...
element-plus标签输入框
最新发布
06-18
Element Plus中的"el-input"标签是一个常用的输入框组件，它提供了丰富的功能和自定义选项，可以满足各种表单输入的需求。 以下是Element Plus输入框（el-input）的一些关键特点： 1. **基础输入**：支持文本、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值