vue表单数据自动收集

最新推荐文章于 2022-10-14 15:30:35 发布

autm许

最新推荐文章于 2022-10-14 15:30:35 发布

阅读量151

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/qq_17108919/article/details/108623736

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

26 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue表单数据自动收集</title>
</head>
<body>
  <div id="demo">
    <div>
      姓名：<input type="text" v-model="userName">
    </div>
    <div>
      性别：
      <input type="radio" id="female" value="女" v-model="sex">
      <label for="female">女</label>
      <input type="radio" value="男" v-model="sex">
      <label for="male">男</label>
    </div>
    <div>
      爱好：
      <input type="checkbox" id="Singing" value="Singing" v-model="likes">
      <label for="Singing">唱歌</label>
      <input type="checkbox" id="dancing" value="dancing" v-model="likes">
      <label for="dancing">跳舞</label>
      <input type="checkbox" id="painting" value="painting" v-model="likes">
      <label for="painting">画画</label>
    </div>
    <div>
      城市：
      <select v-model="citySel">
        <option>请选择</option>
        <option :value="v.id" v-for="(v, k) in cityList">{{v.name}}</option>
      </select>
    </div>
    <div>
      介绍
      <textarea v-model="info"></textarea>
    </div>
    <button @click="submit">提交</button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data () {
        return {
          userName: '',
          sex: '女',
          likes: ['painting'],
          cityList: [
            {id: 12, name: '厦门'},
            {id: 13, name: '上海'},
            {id: 14, name: '北京'},
            {id: 15, name: '深圳'}
          ],
          info: '',
          citySel: '12'
        }
      },
      methods: {
        submit () {
          console.log(this.userName + ' ' + this.sex + ' ' + this.likes + ' ' + this.info + ' ' + this.citySel)
        }
      }
    })
  </script>
</body>
</html>

autm许

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue表单数据自动收集

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue表单数据自动收集</title></head><body> <div id="demo"&
复制链接

扫一扫