小程序案例:比较数字大小

来自CloudWiki
Cloud17讨论 | 贡献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:

Wexin2021092701.png

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;
}