求4:使用watch监听完成如下效果展示:1、创建了两个输入框,一个是公里,第二个是米,实现公里和米的转换。2、我们在两个输入框中的一个输入数字的时候,另一个会有相应的改变,watch负责这背后的更新使用js编写代码
时间: 2024-11-17 08:28:44 浏览: 20
要在JavaScript中使用`watch`监听输入框的值变化并实现单位转换,你可以这样做:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#result {
margin-top: 10px;
}
</style>
</head>
<body>
<input type="number" id="kilometers" placeholder="公里">
<input type="number" id="meters" readonly>
<div id="result"></div>
<script>
// 初始化千米到米的转换比例
const conversionFactor = 1000;
// 创建watch监听器
Vue.prototype.$watch('kilometers', (newValue) => {
let meters = newValue * conversionFactor;
document.getElementById('meters').value = meters.toFixed(2); // 四舍五入保留两位小数
updateResult(meters);
});
function updateResult(meters) {
document.getElementById('result').innerText = `当前距离(米):${meters} 米`;
}
// 当页面加载完成后初始化watch
new Vue({
el: 'body',
});
</script>
</body>
</html>
```
这个例子中,我们使用了Vue.js的简写语法,因为Vue的`$watch`功能非常适合处理这种实时数据绑定的问题。如果不想引入完整的Vue框架,也可以直接用原生JavaScript实现事件监听,不过语法会稍微复杂一些。
阅读全文