> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.customeow.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 使用组件的条件判断实现组件的显示隐藏控制 ## 原理 该功能原理是通过组件的值去控制其他组件的显示隐藏。 当被控制的组件隐藏时，被控制组件的值不会进行任何输出。 条件逻辑并不是某一个组件，而是组件的配置项，组件配置页面下滑即可查看 下面我们使用选择菜单作为「控制组件」，传图组件和文字组件作为「被控制组件」来演示操作方法。 **目标：用户可通过选择菜单选择传图还是刻字** ## 演示操作 ### 1. 添加控制组件和被控制组件 添加「控制组件」（菜单选项）以及「被控制组件」（传图组件+刻字组件） ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/cc7ca411-4b1a-496e-8d7c-a6572f22fd85.png?x-oss-process=image/format%2Cwebp) ### 2. 添加菜单选项值 给菜单选择组件添加选项值，分别是“Custom Photo” 和“Custom Text” ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/4b187ee0-8d81-40de-9532-a6d48521ece2.png?x-oss-process=image/format%2Cwebp) ### 3. 为刻字组件添加条件逻辑 为刻字组件添加上条件逻辑 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/6ff9f52c-8818-4a49-85c6-e9ae1020a992.png?x-oss-process=image/format%2Cwebp) ### 4. 添加条件 添加条件 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/d45e1f36-f1cd-4767-8037-36fb180b5401.png?x-oss-process=image/format%2Cwebp) ### 5. 选择用于判断的组件 选择「菜单选择」组件为判断条件 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/db05ee3f-158e-46a0-a0c1-cf2f62fd985c.png?x-oss-process=image/format%2Cwebp) ### 6. 选择值类型 选择「菜单选择」组件的值类型 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/a963054a-4536-4afa-8af2-aa67d21e3ca3.png?x-oss-process=image/format%2Cwebp) ### 7. 选择判断运算类型 选择判断运算类型 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/b3b62f62-fdee-42a5-b1e5-29f8b04d87b1.png?x-oss-process=image/format%2Cwebp) ### 8. 填写用于判断的值 输出「菜单选择」组件的值，我们的目的是当用户选择「Custom Text」的时候显示刻字组件，因此在这里输入Custom Text。 > **注意：这里一定要与在「菜单选择」组件中输入的值一模一样，包括大小写** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ead44d05-8234-4cf1-b496-8699680c5c21.png?x-oss-process=image/format%2Cwebp) ### 9. 保存条件 输入好后点击Done，可以看到刻字组件已经配置好了条件判断 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/935a72aa-6966-4c6e-a3f3-164b68468d24.png?x-oss-process=image/format%2Cwebp) ### 10. 为传图组件配置条件 同样为传图组件配置上条件判断 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/010c63b6-2df3-49e5-95fb-64eb25f5d736.png?x-oss-process=image/format%2Cwebp) ### 11. 预览效果 都设置好后，我们点击预览看看效果 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/a57f0800-feb0-4e42-81cc-a06e6bed3fef.gif?x-oss-process=image/format%2Cwebp) ## 进阶操作 ### 选择传图数量 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/6bb3443f-4d9b-4b3c-b3fb-5e97e125ad8f.gif?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/86ce506a-6e25-4a0c-a6c1-abb790ecae46.png?x-oss-process=image/format%2Cwebp) ### 选择刻字数量 ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ce4e99d3-d48b-44dc-9b6e-ed1a5b9a8fe6.gif?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/d7e6a4ea-9381-4aa3-8cb7-7f57d6aed11e.png?x-oss-process=image/format%2Cwebp) #### 详解： 以Name 3为例子，当消费者选了3个名字或4个名字的时候，Name 3都需要展示出来，因此需要添加两个条件（当菜单选择组件=3；当菜单选择组件=4），并且这两个条件是或(or)而不是且(and)。 Name 1则无需设置，因为无论消费者选择哪一个，Name 1都会显示 Name2需要3个条件（当菜单选择组件=2；当菜单选择组件=3；当菜单选择组件=4） Name4需要1个条件（当菜单选择组件=4） ## 拓展阅读 ### 新手入门 - [连接店铺](https://help.customeow.io/zh/article/6le5o6l5bqx6zo6-1hgumgi/) - [新手向：跟着教程创建你的第一个定制功能](https://help.customeow.io/zh/article/5paw5oml5zcr77ya6lef552a5pwz56il5yib5bu65l2g55qe56ys5lia5liq5a6a5yi25yqf6io9-1mdw4s4/) - [如何让「定制功能」集成到产品落地页？（产品详情页）](https://help.customeow.io/zh/article/5aac5l2v6k6p44cm5a6a5yi25yqf6io944cn6zug5oiq5yiw5lqn5zob6jc95zyw6ag177yf77yi5lqn5zob6km5oof6ag177yj-2ivrml/) ### 进阶功能 - [定制喵中的「模板」](https://help.customeow.io/zh/article/5a6a5yi25za15lit55qe44cm5qih5p244cn-1fy2no5/) - [工作流-WorkFlow能干什么](https://help.customeow.io/zh/article/workflow-36no1x/) ### 加价与追销 - [什么是追销产品？](https://help.customeow.io/zh/article/5lua5lmi5piv6l96zsa5lqn5zob77yf-1ggsy/) - [什么是加价产品？](https://help.customeow.io/zh/article/5lua5lmi5piv5yqg5lu35lqn5zob77yf-pbohnp/) - [关于加价产品和追销产品以及其在购物车绑定方法](https://help.customeow.io/zh/article/5ywz5lqo5yqg5lu35lqn5zob5zkm6l96zsa5lqn5zob5lul5yk5yw25zyo6lst54mp6l2m57ur5a6a5pa55rov-1pyslym/)