第十三周学习——温度的转换

最新推荐文章于 2024-07-08 10:04:44 发布

cjy1602

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量254

点赞数

分类专栏：我的HTML学习周记文章标签： vue vue.js html

本文链接：https://blog.csdn.net/cjy1602/article/details/118026965

版权

我的HTML学习周记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第十三周学习——温度的转换

前言
温度的转换
效果如下

前言

今天结合Vue的相关知识来做一个简单的温度转换，其实学会以后还可以做各种单位的转换，这个技能在生活中也很实用。

温度的转换

代码如下：

<html>
	<head>
		<meta charset="utf-8">
			
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				请输入摄氏温度：<input v-model="ctemp" />
				<br >
				<br >
				华氏温度：<child v-bind:temp="ctemp"></child>
			</div>
			
		</div>
		<script type="text/javascript">
			Vue.component('child',{
				props:{
					['temp']:Number,
				},
				template:'<span>{{temp*9/5+32}}</span>'
			})
			new Vue({
				el:'#app',
				data:{
					ctemp:0
				}
			})
		</script>
	</body>
</html>

效果如下

在这里插入图片描述

cjy1602

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十三周学习——温度的转换

第十三周学习——温度的转换前言温度的转换效果如下前言今天结合Vue的相关知识来做一个简单的温度转换，其实学会以后还可以做各种单位的转换，这个技能在生活中也很实用。温度的转换代码如下：<html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"
复制链接

扫一扫