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

 <!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>

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

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 打印九九乘法口诀表

· Python实现百钱买百鸡

· 单位之间的换算（千克和磅，英里和千米）

· 英里公里换算器 All In One

· 英制单位转换

阅读排行：
· Excel百万数据高性能导出方案！
· 日常问题排查-空闲一段时间再请求就超时
· 揭秘 AI 工具的系统提示词「GitHub 热点速览」
· C# 14 新增功能一览，你觉得实用吗？
· MySQL同步ES的6种方案！

公告

Live2D

Talk is cheap,
show me your code!

昵称： wjxuriel
园龄： 3年
粉丝： 0
关注： 0

+加关注

2025年5月

日

一

二

三

四

五

六

my-blog-site

Email： wjxuriel@petalmail.com

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

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!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>