(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关

这篇具有很好参考价值的文章主要介绍了(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ⅰ、Element-plus 提供的 Switch 开关组件与想要目标情况的对比:

1、Element-plus 提供 Switch 组件情况:

其一、Element-ui 自提供的 Switch 代码情况为(示例的代码):

(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关,# Element-plus,vue.js,javascript,ecmascript,经验分享,前端框架,element-plus,switch 组件



// Element-plus 自提供的代码:
// 此时是使用了 ts 语言环境,但是我在实际项目中并没有使用 ts 语言和环境;

<template>
  <el-switch v-model="value1" />
  <el-switch
    v-model="value2"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)
</script>

代码地址:https://element-plus.gitee.io/zh-CN/component/switch.html#基础用法

其二、页面的显示情况为:

(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关,# Element-plus,vue.js,javascript,ecmascript,经验分享,前端框架,element-plus,switch 组件

2、目标想修改后的情况:

// 虽然显示的页面是一样的,但是可能后台返回的值是要为字符串的 "true""false";
(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关,# Element-plus,vue.js,javascript,ecmascript,经验分享,前端框架,element-plus,switch 组件

Ⅱ、实现 Switch 开关组件达到目标效果变化的过程:

Switch 开关组件成功引入 vue3 项目的过程(去除了 ts 的语法):

1、如果直接将 true 或 false 的值修改成字符串的 "true" 或 "false",虽然页面不报错,但却不展示 true 的情况:

其一、代码:


<script setup>
import { ref } from 'vue'

const value1 = ref("true")
const value2 = ref(true)
</script>


<template>
  <el-switch v-model="value1" />
  <el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
</template>

其二、有问题的效果展示:

// 此时是将 value1 的值设置成字符串的 "true"switch 开关组件就出现了问题;
// 而 value2 的值并没有修改 true 的值,switch 开关组件就没有问题;

(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关,# Element-plus,vue.js,javascript,ecmascript,经验分享,前端框架,element-plus,switch 组件

2、解决办法:

其一、代码:



// 此时只是在 value1 中的 switch 加入了属性 active-value="true" inactive-value="false" 就解决了返回值为字符串 "true" 的问题;
<script setup>
import { ref } from 'vue'

const value1 = ref("true")
const value2 = ref(true)
</script>


<template>
  <el-switch v-model="value1" active-value="true" inactive-value="false" />
  <el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
</template>

其二、没问题的效果展示:

// 此时是将 value1 的值设置成字符串的 "true" 并添加了 active-value="true" inactive-value="false" 属性值, switch 开关组件就没有问题;
// 而 value2 的值并没有修改 true 的值,switch 开关组件也没有问题;

(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关,# Element-plus,vue.js,javascript,ecmascript,经验分享,前端框架,element-plus,switch 组件

Ⅲ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址 https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章来源地址https://www.toymoban.com/news/detail-639627.html

到了这里,关于(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-switch组件在分页情况下的使用

    1.需求: 系统使用者在点击发布状态的开关后,可以对应的发布或者取消发布试卷 2.前端代码: html代码(这里不贴其他表单项的代码了,直接贴el-Switch组件的代码):

    2024年02月10日
    浏览(34)
  • 使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 项目

    Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。 首先 npm 输入: Project name :项目名称 Select a framework :选择一个框架 Select a variant :选择 ts 或者 js 输入项目名称后选择 vue 选择

    2024年02月09日
    浏览(63)
  • vue使用element-ui或者element-plus固定 el-header 和 el-aside

    vue使用element-ui或者element-plus固定 el-header 和 el-aside 在使用element-plus做后台管理的时候,需要固定el-header和el-aside,特此记录以下。 只需要将el-main固定高度即可。 main.vue css 将 el-main 高度后,当 el-main 内容超出固定高度后就能显示滚轮了。将滚轮样式修改一下就好了。 效果:

    2024年02月13日
    浏览(48)
  • element-plus el-form 表单、表单验证 使用方法、注意事项

    element-plus@2.0.6 及之后的版本,表单验证不再是同步执行的了 另外, element-plus@2.1.4 及之后的版本,才可按照官方文档示例正常使用(使用的是两者的中间版本的话,最好先自行确认下正确的 上例中: 如果在“ 位置1 ”执行表单验证通过后的业务代码,可以去掉 async...await 如

    2024年02月05日
    浏览(63)
  • el-switch

    目录 在element ui中el-switch开关组件具有先改变开关值再传值的特点。(先改后传)  1、触发change事件时 2、绑定disabled属性写三元表达式时  3、解决办法 比如说: el-switch v-model=\\\"scope.row.id\\\" :disabled=\\\"scope.row.id == \\\'N\\\' ? true : false\\\"             active-color=\\\"#409eff\\\" inactive-color=\\\"#dcdfe6\\\"

    2023年04月08日
    浏览(25)
  • vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

    * 初始化node 查看node是否安装 node -v 初始化命令 npm init 初始化配置解释如下: 完成后会有一个package.json文件 * 安装可能用到的依赖 根据需求安装,我这里需要对接mysql,安装依赖 ,我是一次性安装完,后边会直接使用,也可以边安装边使用。如下 安装成功如下: * 配置文件

    2024年02月15日
    浏览(51)
  • vue3使用element-plus 树组件(el-tree)数据回显

    html搭建结构 js 非常好用,拿过来修改一下check事件,ref获取就直接可以使用了 

    2024年04月09日
    浏览(60)
  • el-tree自定义图标,使用图片或者dom自定义图标,element-plus

    el-tree自定义左侧的图标,有很多方法 第一种:通过css类获取到el-tree-node__expand-icon图表类,然后通过设置类名,修改css样式来改变图标。 第二种:通过js直接将el-tree-node__expand-icon元素移除,直接替换掉DOM。 以上两种都是比较刻板的方法,第一种适用于element-ui。 第三种:el

    2024年02月14日
    浏览(52)
  • vue3+ts - element-plus封装上传文件图片组件

      近期做到的项目中有涉及到上传图片上传文件的需求,因为是pc管理后台,用到了element-plus框架,所以我也一起使用element-plus中的上传图片上传图片功能,并对它进行封装成一个组件,方便在多个地方使用。 1、上传文件、视频 2、上传图片   在这里上传图片和文件是分

    2024年02月12日
    浏览(54)
  • vue3-ts- element-plus新增组件-过滤

     新增组件-所有值为空时过滤   提交: 

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包