vue计算属性（computed)练习

最新推荐文章于 2024-03-08 21:49:13 发布

笔描相思

最新推荐文章于 2024-03-08 21:49:13 发布

阅读量371

点赞数

分类专栏：学习文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44788119/article/details/112864251

版权

学习专栏收录该内容

95 篇文章 0 订阅

订阅专栏

vue学习：
vue的计算属性：computed

demo1:当last和frist发生变化，fristLast会跟着变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="id">
			<input v-model="frist" />
			<input v-model="last" />
			<div>
				姓：{{frist}} 名：{{last}} 姓名：{{fristLast}}
			</div>
			
		</div>
	</body>
</html>
<script>
		
	new Vue({
		el:'#id',
		data:{
			frist:'',
			last:''
		},
		computed:{
			 fristLast:function()
			 {
				 return this.frist+this.last
			 }
		}
	})
</script>

样例：
在这里插入图片描述
demo2:
可以设置计算属性的set和get方法，当fristLast发生改变的时候，frist和last都会发生改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="id">
			<input v-model="frist" />
			<input v-model="last" />
			<input v-model="fristLast" />
			<div>
				姓：{{frist}} 名：{{last}} 姓名：{{fristLast}}
			</div>
			
		</div>
	</body>
</html>
<script>
		
	new Vue({
		el:'#id',
		data:{
			frist:'',
			last:''
		},
		computed:{
			fristLast:{
				get:function()
				{
				 return this.frist+' '+this.last
				}
				,
				set:function(newVal)
				{
								
					 var names=newVal.split(' ');
					 this.frist=names[0];
					
					 this.last=names[1];
				}
			}
			
		}
	})
</script>

案例：
在这里插入图片描述
3：计算属性的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body{
				background-color: palevioletred;
			}
		</style>
	</head>
	<body>
		<div id="fen">
			<input v-model="en"/> 英语得分：{{en}}
			<input v-model="sh"/>  数学得分：{{sh}}
			<input v-model="li"/> 历史的分：{{li}}
			<hr style="width: 100%;border: #DB7093;size: 2px;">
			<div>{{zong}}</div>
		</div>

	</body>
</html>
<script>
	var vm=new Vue({
		el:"#fen",
		data:{
		en:70,
		sh:80,
		li:90
		},
		computed:{
			zong:function(){
				if(!this.li)
				{
					this.li=0;
				}
				if(!this.en)
				{
					this.en=0;
				}
				if(!this.sh)
				{
					this.sh=0;
				}
				return parseInt(this.li)+parseInt(this.en)+parseInt(this.sh);
			}
		}
	})
</script>