介绍
这篇文章给大家分享的是有关CSS伪类:空的用法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
我当时是这么想的:一方面出于“不在JavaScript里写太多东西”的考虑,另一方面,由于省,市,区我是分别用三个变量来实现的,所以JavaScript里就关注这三个变量,比如之间的空格或其它东西都拿到wxml文件里。就像这样:
& lt; view 类=癲epartments location", bindtap=癴ixedshow"比; & lt;才能view 类=癲epart_title"祝辞所在位置& lt;/view> & lt;才能view 天气:如果=皗{provinces&, citys&及地区}}“,类=皃laceholder depart_content"在{{省份}},{{北京市}},{{地区}}& lt;/view> & lt;才能view 类=皃laceholder depart_content befselect",天气:else>请选择当前位置& lt;/view> & lt;才能view 类=癲esc"在如有变动请修改后再次提交& lt;/view> & lt;/view>
(因为调用涉及到后来改动的只有在点击弹窗里的“确认“按钮时在事件中将那三个变量分别赋给这段代码中出现的三个变量和终止,和终止,否则会只要改动不管是点取消还是确认已经发生改变了,这样不妥!)
其布局是这样的:,
.departments { ,,宽度:100%; ,,身高:96 rpx; ,,显示:flex; ,,对齐项目:中心; ,,字体大小:36 rpx; ,,粗细:347; ,,文本溢出:省略; ,,溢出:隐藏。 ,,空白:nowrap;} } .location { 位置:,才能相对; 边界底部才能:1 rpx solid rgba (0, 0, 0, .009); ,,显示:flex; ,,对齐项目:flex-start; ,,padding-top: 20 rpx; } .desc { 位置:才能,绝对; ,,右:19 rpx; 底才能:4 rpx; ,,颜色:rgb (63142255); ,,字体大小:23 rpx; } .departments .depart_title { ,,宽度:20%; } .departments .depart_content { ,,margin-left: 10%; ,,文本溢出:省略; ,,溢出:隐藏。 ,,空白:nowrap;} } .departments .placeholder { ,,宽度:69%; ,,文本溢出:省略; ,,溢出:隐藏。 ,,空白:nowrap;} }
在决定了要替换这里的天气:如果以后,你首先要想:用什么替换?
<代码>天气:如果> 代码作用是判断”是否存在”,如果不存在(条件不满足)就切换到<代码>天气:代码>或其他是<代码>天气:elif> 代码的逻辑里!
好的,想到这里,你应该能想到一个CSS伪类:<代码>:空> 代码!它的作用和我们想要的效果一样:判断如果元素(内容)为空的话,白马王子
我迅速对代码做了改动:
& lt; view 类=癲epartments location", bindtap=癴ixedshow"比; & lt;才能view 类=癲epart_title"祝辞所在位置& lt;/view> & lt;才能view 类=皃laceholder depart_content"在{{省份}},{{北京市}},{{地区}}& lt;/view> & lt;才能view 类=癲esc"在如有变动请修改后再次提交& lt;/view> & lt;/view>
然后在类——depart_content上加了这个伪类:
.placeholder:{之前空:: ,,内容:“请选择当前位置“; 颜色:,才能rgba (0, 0, 0, 0。6); }