Vue学习第二天笔记

Vue-day02

1.表单元素

1.input 单选，多选，下拉 下拉多选 文本域 提交

单选
<!-- radio:需要出现互斥情况，那么需要通过value绑定属性值，此时v-model会通过value值找到对应的属性进行绑定 -->
性别:<input type="radio"  v-model='sex' value="男">男
<input type="radio"  v-model='sex' value="女">女

多选
 <div id="app">
         <input type="checkbox" v-model='checked'>{
  {checked}}

         <select  v-model='hobby'>
            <option value="" disabled>请选择</option>
             <option value="吃饭">吃饭</option>
             <option value="睡觉">睡觉</option>
             <option value="打豆豆">打豆豆</option>
         </select>
         爱好:{
  {hobby}}


         <!-- multiple   实现下拉菜单的多选 -->
         <select multiple  v-model='hobby1'>
            <option value="" disabled>请选择</option>
             <option value="吃饭">吃饭1</option>
             <option value="睡觉">睡觉1</option>
             <option value="打豆豆">打豆豆1</option>
         </select>
         爱好:{
  {hobby1}}


         <!-- 总结:对于checkbox来讲，默认的初始值类型为数组，如果是其他数据类型，则会直接转换为布尔类型 -->
         <input type="checkbox" value="唱歌" v-model='hobby2'>唱歌
         <input type="checkbox" value="跳舞"  v-model='hobby2'>跳舞
         <input type="checkbox" value="画画"  v-model='hobby2'>画画
         <input type="checkbox" value="打豆豆"  v-model='hobby2'>打豆豆
         爱好:{
  {hobby2}}