Day6 输入框介绍

看完上一篇的输入,今天来介绍不一样表单元件

Input text
https://ithelp.ithome.com.tw/upload/images/20210920/20140076kKHhz5GrU5.png
https://ithelp.ithome.com.tw/upload/images/20210920/201400766Tq0ZyyTjm.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076Q8XMGPOsW4.png

Textarea多行文字
https://ithelp.ithome.com.tw/upload/images/20210920/20140076ASRDh68NP4.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076ZRjNa8HYem.png

Checkbox复选框
https://ithelp.ithome.com.tw/upload/images/20210920/20140076q1jaP0ZwDn.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076tbqdRqz6WO.png
https://ithelp.ithome.com.tw/upload/images/20210920/201400761wF0FDpoBx.png

这里将多个checkbox设同一群组,box为一阵列存放勾选的value字串

Radio Button单选按钮
https://ithelp.ithome.com.tw/upload/images/20210920/20140076eGPZt0FJKj.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076MKhWulkwUc.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076ZpFInuN3Xw.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076GL0iYzyRub.png
这里v-model的值绑定为box,一开始为选择任何按钮所以设定为为选择

Select 下拉选单
https://ithelp.ithome.com.tw/upload/images/20210920/20140076jUDYIAKzzI.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076q8XDdB5lnL.png
https://ithelp.ithome.com.tw/upload/images/20210920/2014007646yzUMwYev.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140076tlUofFkN2d.png

今天输入框的部分就到这边,明天会来说说计算属性(Computed)

参考资料: https://vuejs.org/v2/guide/computed.html


<<:  [Angular] Day20. Angular Routing

>>:  C#入门之文本处理（下）

【分享】CSS-底线画起来!底线动起来+尾声

当年求学的时候有个老师很喜欢说 "老师说这个很重要的意思就是......这个很~ 重 ~ ...

Day 23：「儿子，这是你的零用钱」- 元件间的资料传递

兔大夫： 「请问是兔豪的家属吗？」 兔豪爸： 「是，我就是。 请问我鹅子他...」 兔大夫： 「抱...

Amazon SageMaker 机器学习线上研讨会

研讨会报名网址：https://supr.link/lmFHX 在这场1小时的线上研讨会中，您可以学...

Day 28：Diffie–Hellman演算法

一路到了铁人赛最後阶段，最後写两个完全不同但都蛮有趣的演算法。 我们之前写到SHA家族演算法可以用来...

JS 35 - 用 input 选择图片後显示预览图

大家好！ 今天我们要实作的是，用 input 选择图片并在画面上显示预览图。 我们进入今天的主题吧！...