vue学习笔记-5-vue小例子：加法计算器

最新推荐文章于 2023-04-02 20:50:09 发布

笑道三千

最新推荐文章于 2023-04-02 20:50:09 发布

阅读量256

点赞数 1

分类专栏： # vue基础

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108185152

版权

vue基础专栏收录该内容

37 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
			 	display:none
			 }
			 #app{
				 width: 20%;
				 margin: 200px auto;
				 line-height: 40px;
				 border: 1px solid #ccc;
				 padding: 10px;
			 }
			 
		</style>
	</head>
	<body>
		<div id="app">
			<h1>简单加法计算器</h1>
			<span>数值A:</span>
			<input type="text"  v-model="numa"/>
			<br>
			<span>数值B:</span>
			<input type="text"  v-model="numb"/>
			<br>
			<input type="button" @click="caculate" value="计算" />
			<br>
			<span>计算结果：</span>
			<span v-text="result"></span>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el: "#app",
				data:{
					numa:" ",
					numb:" ",
					result: " "
				},
				methods:{
					caculate:function(){
						this.result=parseInt(this.numa)+parseInt(this.numb)
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
从上面的例子可以看出来，vue其实是单向的数据绑定，也就是，vm中的数据变化，会实时变化到页面上。
而双向数据绑定，则是只有v-model才有。

笑道三千

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记-5-vue小例子：加法计算器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-height: 40px;
复制链接

扫一扫