四. Vue-简单计算器

最新推荐文章于 2023-04-02 18:46:11 发布

顾怀宁

最新推荐文章于 2023-04-02 18:46:11 发布

阅读量125

点赞数

分类专栏： VUE 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45701449/article/details/107104883

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简单计算器

通过v-model进行双向数据绑定
给计算按钮，绑定事件，实现计算逻辑
将计算结果绑定到相应位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
			  display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>简单计算器</h1>
			<div>
				数值A:<input type="text"  v-model.number="a"/>
			</div>
			<!-- 利用v-model进行双向数据绑定，利用number修饰符，将文本转化为数值 -->
			<div>
				数值B:<input type="text"  v-model.number="b"/>
			</div>
			<div>
				<button type="button" v-on:click="compute">计算</button>
			</div>
			<div v-text="result">计算结果为：</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue(
			{
				el:'#app',
				/*用于告诉vue数据的填充位置，利用id等进行标注*/
				data:
				{
					a:"",
					b:"",
					result:"",
				},
				methods:
				{
					compute:function(){
						this.result = this.a+this.b
						// 实现计算逻辑
					}
				}
			});
		</script>
	</body>
</html>

顾怀宁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四. Vue-简单计算器

简单计算器通过v-model进行双向数据绑定给计算按钮，绑定事件，实现计算逻辑将计算结果绑定到相应位置<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></scrip
复制链接

扫一扫