“小程序案例:比较数字大小”的版本间的差异
来自CloudWiki
(创建页面,内容为“==WXML代码== <nowiki> <view><text>请输入第1个数字:</text><input type="number" /></view> <view><text>请输入第2个数字:</text><input type="number"…”) |
|||
第21行: | 第21行: | ||
[[文件:wexin2021092701.png]] | [[文件:wexin2021092701.png]] | ||
+ | |||
+ | ==WXSS== | ||
+ | |||
+ | <nowiki> | ||
+ | .class .container 选择所有class="container"的组件 | ||
+ | #id #id 选择id="#id"的组件 | ||
+ | element view 选择所有view组件 | ||
+ | element, element view, text 选择所有view组件和所有text组件 | ||
+ | ::after view::after 在view组件内的后面插入内容 | ||
+ | ::before view::before 在view组件内的前面插入内容</nowiki> | ||
+ | |||
+ | ===选择器使用演示=== | ||
+ | element: | ||
+ | |||
+ | <nowiki>view { | ||
+ | margin: 20px; | ||
+ | }</nowiki> |
2021年9月27日 (一) 13:05的版本
WXML代码
<view><text>请输入第1个数字:</text><input type="number" /></view> <view><text>请输入第2个数字:</text><input type="number" /></view> <button>比较</button> <view><text>比较结果:</text></view>
input组件的可选值:
text 文本输入键盘 number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘
注:
<view>和<text>属于双边标签,由开始标签和结束标签两部分构成,<input>属于单边标签,只有“开始标签”,且结尾用“/>”表示。值得一提的是,<input>也可以写成双边标签,如“<input></input>”
设input组件type属性值为number:
WXSS
.class .container 选择所有class="container"的组件 #id #id 选择id="#id"的组件 element view 选择所有view组件 element, element view, text 选择所有view组件和所有text组件 ::after view::after 在view组件内的后面插入内容 ::before view::before 在view组件内的前面插入内容
选择器使用演示
element:
view { margin: 20px; }