Wex5 组件的bind-visible属性控制显隐

最新推荐文章于 2023-10-20 22:06:56 发布
原创 最新推荐文章于 2023-10-20 22:06:56 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Wex5

本文介绍了一种在页面上控制组件显示与隐藏的方法，通过在需要控制的组件上使用bind-visible属性绑定值，并利用js代码在按钮点击事件中实现切换。文章还提供了一种更灵活的写法，同时解决了组件初次加载时短暂显示的问题，提升用户体验。

1.选择需要控制显隐的组件，在bind-visible属性绑定值
在这里插入图片描述
2.js代码如下
在这里插入图片描述
3.在控制显隐的btn按钮的点击事件中，js代码如下
在这里插入图片描述
或者有更灵活的写法this.shouldShowVersion.set(！($(this.shouldShowVersion.set).get()));

以上的写法还会存在一个问题，被设置为隐藏的组件，在第一次打开页面或刷新的时候会一闪而过，影响页面美观，解决方法如下：
在这里插入图片描述
在这里插入图片描述

wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
qq_27727681的博客
12-03 3696
wex5作为网页开发利器，在前台UI数据交互设计中大量使用了绑定技术，即官方视频教学中也提到了KO,实质是数据绑定与追踪。在前台组件的属性中，为我们提供了两个重要的样式绑定属性，bind-css和bind-style.这两个属性都能动态的为组件或元素绑定样式，那么含义和用法有什么异同呢？       先来看两个例子：    一..bind-css案例：            组件属性设置:
h-table（表格列表组件的全封装）
weixin_46820017的博客
02-23 912
如何使用vue封装列表高级查看，表格多种配置使用。三大组件共同合成封装表格组件。（3）tool工具设置栏。（2）table表格。
visible绑定(The "visible" binding)
weixin_30609331的博客
02-15 224
对visible进行绑定可以控制元素的显示和隐藏。 示例： <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div> <script typ...
visible, disable, css绑定
weixin_34397291的博客
08-11 196
这个例子非常简单，主要演示如何通过属性控制html元素的显示与否（visible），可用性（disable）以及根据属性添加相应的CSS样式。 先简单的看一段代码： <p> <input id="isvip" type='checkbox' data-bind="checked: isVip" /> <label for="isvip"&g...
WEX5学习笔记（十一）
天才李晓晓的
08-03 287
控制是否显示的属性bind-visible 在要显示与不显示的组件上设置 bind-visible动态属性 val("fDiscount")<10 //表示如果商品现价小于10就显示 不然不显示。 ...
Wex5常用组件使用说明
weixin_37981475的博客
12-09 944
================================================ button按钮组件动态调整代码 例如：调整按钮的标签为启用，状态为不可用，图标换成icon-play this.comp(‘stateBtn’).set({disabled:true,label:“启用”,icon:“icon-play”}); this.comp(‘xid名称’).set({是否禁用:true,标题:“启用”,图标:“icon-play”}); 注意：set方法可以一次修改多个属性，因此se
Element Ui 中的 :visible.sync
摸鱼大王的博客
08-13 8003
<!-- 弹出框dialog弹框 新增和修改弹出框--> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form-item label="测试岗位" prop="postName"> <el-inpu
说出vue中常用的指令的作用，比如v-bind v-model v-for v-on，v-show与v-if
04-11
| `v-show` | 修改元素的 `display` 样式来控制显隐 | | `v-if` | 根据条件动态插入/销毁 DOM | 其中，`v-show` 更适合频繁切换场景下的效率优化，而 `v-if` 对于初始加载阶段更高效因为未满足条件时不参与任何计算...
如果显隐标签是在子组件中,但button是在父组件中,如何实现此功能
最新发布
04-19
不过，用户提到要传递visible状态，这可能意味着子组件需要根据父组件的visible值来控制自身的显隐。这时候，子组件需要接收visible作为prop，并在其内部使用v-show绑定这个prop。但需要注意的是，直接修改prop在子...
这里面的这个是什么意思：<child-dialog :visible.sync="dialogVisible" :current-item="currentItem"/>
02-28
1. 通过 `visible` 属性控制显示 2. 点击关闭按钮时自动触发 `update:visible` 事件 3. 需要 `.sync` 实现双向绑定才能正常关闭弹框 --- ### 四、数据流向示意图 ```mermaid sequenceDiagram 父组件->>子组件: ...
WeX5 & BeX5 页面框架核心之数据绑定
boss2967的博客
02-26 1662
WeX5 &amp; BeX5 页面框架核心之数据绑定视频地址：http://pan.baidu.com/s/1hqlBoC8目录1、引言：《外卖》案例的代码不完整吗？？？2、概述2.1、WeX5页面组成2.2、数据绑定3、规则表达式3.1、数据规则3.2、环境变量3.3、上下文对象3.4、ref、val和label的区别4、绑定表达式4.1、概述4.2、绑定表达式的环境变量和上下文对象4.3、特...
【分享】html5 开发工具——WeX5中的各种绑定方式
weixin_34160277的博客
06-30 298
2019独角兽企业重金招聘Python工程师标准>>> ...
v-bind添加修饰符:visible.sync
pscool的博客
03-27 328
【代码】v-bind添加修饰符:visible.sync。
knockoutjs中的visible绑定
热门推荐
至尊宝
04-09 2万+
强烈推荐一个大神的人工智能的教程：http://www.captainbed.net/zhanghan visible就是用来控制是否显示的，当值为true的时候则显示，为false的时候隐藏，knockoutjs有双向绑定的机制，假设现在有一个场景，从后台查出数据，数据格式为一个list，查出数据后需要绑定到前台页面上，这时候需要去判断查回的list是否是存在的，也就是有数...
控制dom元素隐藏和显示的几种做法
boss2967的博客
02-27 1万+
控制dom元素隐藏和显示的几种做法1.style属性的display 被隐藏的控件不再占用显示时占用的位置this.getElementByXid(‘domXid’).style.display=”none”;this.getElementByXid(‘domXid’).style.display=”block”;2.“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的...
如何显示/隐藏一个DOM元素？有几种方法？每种方法的区别？
limeng886549的博客
08-16 6687
1.style属性的display 被隐藏的控件不再占用显示时占用的位置： this.getElementByXid(‘domXid’).style.display=”none” this.getElementByXid(‘domXid’).style.display=”block” 2.visibility隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置： this.getEleme...
总结一下vue中v-bind的常见用法
罗铠威的博客
10-20 1229
本篇博客主要总结一下v-bind命令在vue中的常见用法。
vue(v-bind修改样式属性、自定义命令、过滤器filter)
m0_66970189的博客
06-23 2041
css代码 js代码 v-bind 使用格式 用于修改行内属性 格式： 简写：`:属性名=‘变量’ 注意： class操作类名 单独写一个变量名 只写一个的话，要写变量名 写数组 1. 数组里的数据加引号的话，就填入class名 2. 数组里面的数据不加引号，就填入变量名 对象形式，判断：后面是否为true ，如果是true就调用这个类名的设置的样式 v-for 补充 :key v-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id 自定义指令 全局自定义命令
Wex5动态创建组件---按钮组件
weixin_37981475的博客
12-09 455
Model.prototype.button1Click = function(event){//创建组件的触发事件 //====================================================================================== var Button = require("$UI/system/components/justep/button/button");//先引入JS文件 var parentNode = this.get.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值