Vue Axios示例-zipcode查找

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js Tutorial | API Example</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="app">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="lead-form">
              <h1 class="text-center">Fill Out This Form</h1>
              <hr />
              <div class="row">
                <div class="col-md-6">
                  <input type="text" class="form-control" placeholder="Starting Zip" v-model="startingZip">
                  <span class="city-span">{{startingCity}}</span>
                </div>
                <div class="col-md-6">
                  <input type="text" class="form-control" placeholder="Ending Zip" v-model="endingZip">
                  <span class="city-span">{{endingCity}}</span>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <button class="btn btn-primary btn-block" id="submit-form">Submit</button>
                </div>
              </div>
            </div><!-- end of .lead-form -->
          </div> <!-- end of .col-md-6.col-md-offset-3 -->
        </div> <!-- end of .row -->
      </div> <!-- end of .container -->
    </div> <!-- end of #app -->
  </body>

  <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
  <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
  <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        startingZip: '',
        startingCity: '',
        endingZip: '',
        endingCity: ''
      },
      watch: {
        startingZip: function() {
          this.startingCity = ''
          if (this.startingZip.length == 5) {
            this.lookupStartingZip()
          }
        },
        endingZip: function() {
          this.endingCity = ''
          if (this.endingZip.length == 5) {
            this.lookupEndingZip()
          }
        }
      },
      methods: {
        lookupStartingZip: _.debounce(function() {
          var app = this
          app.startingCity = "Searching..."
          axios.get('http://ziptasticapi.com/' + app.startingZip)
                .then(function (response) {
                  app.startingCity = response.data.city + ', ' + response.data.state
                })
                .catch(function (error) {
                  app.startingCity = "Invalid Zipcode"
                })
        }, 500),
        lookupEndingZip: _.debounce(function() {
          var app = this
          app.endingCity = "Searching..."
          axios.get('http://ziptasticapi.com/' + app.endingZip)
                .then(function (response) {
                  app.endingCity = response.data.city + ', ' + response.data.state
                })
                .catch(function (error) {
                  app.endingCity = "Invalid Zipcode"
                })
        }, 500)
      }
    })
  </script>
</html>
Vue Axios示例-zipcode查找

推荐阅读更多精彩内容
