Vue：表单数据收集

收集input：text文本
文本框 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>表单收集</h1>
    <label for="username">用户名：</label>
    <input type="text" v-model="username" id="username">


</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
      username:""
    }
  })
  console.log(v)
</script >
</html>
收集input：radio 单选框
单选框 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>表单收集</h1>
    <label for="username">用户名：</label>
    <input type="text" v-model="username" id="username">
    性别：<!--在正常的单选框下全部加v-model-->
    男<input type="radio" name="sex" value="男" v-model="sex">
    女<input type="radio" name="sex" value="女" v-model="sex">


</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
      username:"",
      sex:''
    }
  })
  console.log(v)
</script >
</html>
收集input：checkbox 多选框
多选框 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>表单收集</h1>
    <label for="username">用户名：</label>
    <input type="text" v-model="username" id="username">
    性别：<!--在正常的单选框下全部加v-model-->
    男<input type="radio" name="sex" value="男" v-model="sex">
    女<input type="radio" name="sex" value="女" v-model="sex">
    爱好：<!--在正常的多选框下全部加v-model-->
    <input type="checkbox" value="读书" v-model="hobby">抽烟
    <input type="checkbox" value="喝酒" v-model="hobby">喝酒
    <input type="checkbox" value="染发" v-model="hobby">染发

</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
      username:"",
      sex:'',
     //使用数组接收
	  hobby:[]
    }
  })
  console.log(v)
</script >
</html>
收集select 选择框
下拉框 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>表单收集</h1>
    <label for="username">用户名：</label>
    <input type="text" v-model="username" id="username">
    性别：
    男<input type="radio" name="sex" value="男" v-model="sex">
    女<input type="radio" name="sex" value="女" v-model="sex">
    爱好：
    <input type="checkbox" value="读书" v-model="hobby">抽烟
    <input type="checkbox" value="喝酒" v-model="hobby">喝酒
    <input type="checkbox" value="染发" v-model="hobby">染发
    城市：<!--只需要在select链接即可-->
  <select v-model="city">
    <option value="shanghai">上海</option>
    <option value="shanghai">北京</option>
    <option value="shanghai">深圳</option>
  </select>


</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
      username:"",
      sex:'',
      hobby:[],
      city:''
    }
  })
  console.log(v)
</script >
</html>
posted @ 2021-11-09 10:59  旅祸少年  阅读(69)  评论(0)    收藏  举报