广州站在哪个区,开个做网站的公司 知乎,做行业网站,设计公司网站欣赏Ⅰ、Element-plus 提供的 Switch 开关组件与想要目标情况的对比#xff1a;
1、Element-plus 提供 Switch 组件情况#xff1a;
其一、Element-ui 自提供的 Switch 代码情况为(示例的代码)#xff1a; // Element-plus 自提供的代码#xff1a;
// 此时是使用了 ts 语言环…Ⅰ、Element-plus 提供的 Switch 开关组件与想要目标情况的对比
1、Element-plus 提供 Switch 组件情况
其一、Element-ui 自提供的 Switch 代码情况为(示例的代码) // Element-plus 自提供的代码
// 此时是使用了 ts 语言环境但是我在实际项目中并没有使用 ts 语言和环境templateel-switch v-modelvalue1 /el-switchv-modelvalue2classml-2style--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949/
/templatescript setup
import { ref } from vueconst value1 ref(true)
const value2 ref(true)
/script
代码地址https://element-plus.gitee.io/zh-CN/component/switch.html#基础用法
其二、页面的显示情况为 2、目标想修改后的情况:
// 虽然显示的页面是一样的但是可能后台返回的值是要为字符串的 true 或 false;
Ⅱ、实现 Switch 开关组件达到目标效果变化的过程
Switch 开关组件成功引入 vue3 项目的过程(去除了 ts 的语法)
1、如果直接将 true 或 false 的值修改成字符串的 true 或 false虽然页面不报错但却不展示 true 的情况
其一、代码 script setup
import { ref } from vueconst value1 ref(true)
const value2 ref(true)
/scripttemplateel-switch v-modelvalue1 /el-switch v-modelvalue2 classml-2 style--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949/
/template
其二、有问题的效果展示
// 此时是将 value1 的值设置成字符串的 true switch 开关组件就出现了问题; // 而 value2 的值并没有修改 true 的值switch 开关组件就没有问题;
2、解决办法
其一、代码
// 此时只是在 value1 中的 switch 加入了属性 active-valuetrue inactive-valuefalse 就解决了返回值为字符串 true 的问题;
script setup
import { ref } from vueconst value1 ref(true)
const value2 ref(true)
/scripttemplateel-switch v-modelvalue1 active-valuetrue inactive-valuefalse /el-switch v-modelvalue2 classml-2 style--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949/
/template
其二、没问题的效果展示
// 此时是将 value1 的值设置成字符串的 true 并添加了 active-valuetrue inactive-valuefalse 属性值 switch 开关组件就没有问题; // 而 value2 的值并没有修改 true 的值switch 开关组件也没有问题; Ⅲ、小结
其一、哪里有不对或不合适的地方还请大佬们多多指点和交流 其二、若有转发或引用本文章内容请注明本博客地址 https://blog.csdn.net/weixin_43405300,创作不易且行且珍惜 其三、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482
