• vue表单项目


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
      
      form div {
        height: 40px;
        line-height: 40px;
      }
    
      form div:nth-child(4) {
        height: auto;
      }
      form div span:first-child {
        display: inline-block;
        width: 100px;
      }
      </style>
    </head>
    <body>
      <div id="app">
        <form action="http://www.baidu.com">
          <div>
            <span>姓名:</span>
            <span>
              <input type="text" v-model='uname'>
            </span>
          </div>
          <div>
            <span>性别:</span>
            <span>
              <input type="radio" id="male" value="1" v-model='gender' >
              <label for="male"></label>
              <input type="radio" id="female" value="2" v-model='gender'>
              <label for="female"></label>
            </span>
          </div>
          <div>
            <span>爱好:</span>
            <input type="checkbox" id="ball" value="1" v-model='bobby'>
            <label for="ball">篮球</label>
            <input type="checkbox" id="sing" value="2" v-model='bobby'>
            <label for="sing">唱歌</label>
            <input type="checkbox" id="code" value="3" v-model='bobby'>
            <label for="code">写代码</label>
          </div>
          <div>
            <span>职业:</span>
            <select v-model='occupation' multiple='true'>
              <option value="0">请选择职业...</option>
              <option value="1">教师</option>
              <option value="2">软件工程师</option>
              <option value="3">律师</option>
            </select>
          </div>
          <div>
            <span>个人简介:</span>
            <textarea v-model='description'></textarea>
          </div>
          <div>
            <input type="submit" value="提交" @click.prevent = 'handle' >
          </div>
        </form>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script>
          var vm = new Vue({
              el:'#app',
              data:{
                  uname:'lisi',
                  gender:1,
                  bobby:['2','3'],//数组因为是多个值
                  occupation:['2'],
                  description:''
              },
              methods:{
                handle:function(){
                  // console.log(this.uname);
                  // console.log(this.gender);
                  // console.log(this.bobby.toString());
                  // console.log(this.occupation);
                  console.log(this.description);
                }
              }
          })
      </script>
      
    </body>
    </html>
  • 相关阅读:
    harbor1.9仓库同步迁移
    接口强制删除namespace 为Terminating的方法
    k8s 命令自动补全
    docker harbor 搭建&配置http/https 方法
    docker harbor 清理释放存储空间
    强化学习系列
    Kaggle的Outbrain点击预测比赛分析
    talkingdata比赛分析
    keras模型总结
    深度神经网络多任务学习(Multi-Task Learning in Deep Neural Networks)
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/13187705.html
Copyright © 2020-2023  润新知