测试开发笔记

前端技术

如何使用Vue获得多个input和多选框的值，以及双向绑定

By 李镇伟 2018年10月23日

需求分析

1.有三个多选框选项。当选择不同的按钮时，界面上会实时展示所选的参数
2.有用户名和密码，当输入用户名和密码时，界面上会实时展示所输入的参数
3.当点击登录按钮的时候，会弹出alert，展示当前所选的所有参数

实现代码

通过v-model实时获得input的输入值。通过v-on监听login事件。完整代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vueapp01</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
  .class1{
    background: #444;
    color: #eee;
  }
</style>
<body>
  <!-- <div id="app"></div> -->
  <div id='example-3'>
    <input type="checkbox" id="jack" value="白金会员" v-model="checkedNames">
    <label for="jack">白金会员</label>
    <input type="checkbox" id="john" value="黄金会员" v-model="checkedNames">
    <label for="john">黄金会员</label>
    <input type="checkbox" id="mike" value="王者会员" v-model="checkedNames">
    <label for="mike">王者会员</label>
    <br>
    <span>选择会员种类: {{ checkedNames }}</span>
  </div>
  <div id="app2">
    <input v-model="username" placeholder="用户名">
    <p>用户名是: {{ username }}</p>
    <input  type="password" v-model="password" placeholder="密码">
    <p>密码是: {{ password }}</p>
    <button v-on:click="login">登录</button>
  </div>
</body>
<script type="text/javascript">
  var chenames=new Vue({
    el: '#example-3',
    data: {
      checkedNames: []
    }
  })
  var user=new Vue({
    el :'#app2',
    data: {
      username:'',
      password:''
    },
    methods :{
      login:function(event){
        alert('用户名是:'+this.username+',密码是:'+this.password+'，选择的是:'+chenames.checkedNames)
      }
    }
  })
</script>
</html>