vue(6)计算属性

最新推荐文章于 2024-10-23 14:06:45 发布

原创最新推荐文章于 2024-10-23 14:06:45 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

14 篇文章

订阅专栏

博客围绕Vue展开，但具体内容缺失，推测可能涉及Vue在前端开发中的应用、特性等信息技术相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<style type="text/css">
		table tr td{
			border:1px solid gray;
			padding:10px;
		}
		table{
			border-collapse:collapse;
			width:800px;
			table-layout:fixed;
		}
		tr.firstLine{
			background-color: lightgray;
		}
	</style>
</head>
<body>
	<script src="vue.min.js"></script>
	<div id="div1">
		<table align="center">
			<tr>
			<td>人民币</td>
			<td>美元</td>
			</tr>
			<tr>
				<td align="center" colspan="2">
					汇率：<input type="number" v-model.number="exchange">
				</td>
			</tr>
			<tr>
				<td align="center">
					￥:<input type="number" v-model.number.lazy = "rmb">
				</td>
				<td align="center"><!--区别：computed是有缓存的，rmb没变化，直接返回以前值-->
					$:{{dollar}}——${{getDollar()}}
				</td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		new Vue({
			el:"#div1",
			data:{
				exchange:6.4,
				rmb:0
			},
			computed:{
				dollar:function(){
					return this.rmb/this.exchange;
				}
			},
			methods:{
				getDollar:function(){
					return this.rmb/this.exchange;
				}
			}
		});
	</script>
</body>
</html>