以下实例进行千米与米之间的换算： 

<!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.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>千米与米之间的换算</title>
  </head>
  <body>
    <div id="app">
      千米 :
      <input type="text" v-model="kilometers" />
      米 :
      <input type="text" v-model="meters" />
    </div>
    <p id="info"></p>
    <script>
      const app = {
        data() {
          return {
            kilometers: 0,
            meters: 0,
          }
        },
        watch: {
          kilometers: function (val) {
            this.kilometers = val
            this.meters = this.kilometers * 1000
          },
          meters: function (val) {
            this.kilometers = val / 1000
            this.meters = val
          },
        },
      }
      vm = Vue.createApp(app).mount('#app')
      vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById('info').innerHTML =
          '修改前值为: ' + oldValue + '，修改后值为: ' + newValue
      })
    </script>
  </body>
</html>

image

posted @ 2022-04-28 15:56  wjxuriel  阅读(418)  评论(0)    收藏  举报