表单提交单选多选文本

贺今宵

于 2021-12-31 15:23:19 发布

阅读量181

点赞数

分类专栏： element ui的各种问题文章标签： postman elementui json

本文链接：https://blog.csdn.net/qq_51389137/article/details/122257031

版权

element ui的各种问题专栏收录该内容

12 篇文章 3 订阅

订阅专栏

简单样式内联，各类选框，生成json文件

<body>
    <form id="f1" style="background-color: bisque;width: 200px;" @submit.prevent='up'>
        账号<input type="text"v-model='list.admin'><br>
        密码<input type="number"  v-model='list.password'><br>
    性别 男<input type="radio" v-model='list.sex' value="male">
            女<input type="radio" v-model='list.sex' value="female"><br>
    
    爱好:<br>
     吃<input type="checkbox" v-model='list.like' value="eat">
    喝<input type="checkbox"  v-model='list.like' value="drink">
    睡<input type="checkbox"  v-model='list.like' value="sleep">
</checkboxs><br>
    选择地区 <select v-model='list.address'>
       <option value="z">中国</option>
       <option value="f">法国</option>
       <option value="j">日国</option>
       <option value="m">魔国</option>
    </select><br>
    其他内容<br>
    <textarea v-model='list.ohter'></textarea><br>
    <input type="checkbox" v-model='list.show'>同意授权<br>
    <button style="margin-left: 10px;width: 150px;" >提交</button>
    </form>  
    <script>
  const vm=new Vue({
      el:'#f1',
      data:{
          list:{
              admin:'',
              password:'',
              sex:'male',
              like:[],
              address:'',
              ohter:'',
              show:'true'
          }
      },
    methods: {
        up(){
            console.log(JSON.stringify(this._data))
        }
    },
  })

    </script>
</body>

初始

填写

控制台

贺今宵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单提交单选多选文本

简单样式内联，各类选框，生成json文件<body> <form id="f1" style="background-color: bisque;width: 200px;" @submit.prevent='up'> 账号<input type="text"v-model='list.admin'><br> 密码<input type="number" v-model='list.password'&gt
复制链接

扫一扫