Vue.js计算属性

最新推荐文章于 2022-10-12 20:06:39 发布

冰冷的冰

最新推荐文章于 2022-10-12 20:06:39 发布

阅读量179

点赞数

文章标签： css vue.js html5

本文链接：https://blog.csdn.net/buchishutiao/article/details/114303316

版权

Vue提供了计算属性这种方法，就是为了避免在模板中加入过重的业务逻辑，在计算属性里可以完成各种复杂的逻辑。最主要的一点是计算属性还可以依赖多个vue实例的数据，只要其中任一数据发生变化，计算属性就会重新执行。
1.反转字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		
		</style>
	</head>
	<body>
		<div id="app">
			<p>{{message}}</p>
			<p>{{reverMessage}}</p>
			
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
			   message:"hello word"
			   
			},
			computed:{
				reverMessage:function(){
					return this.message.split(" ").reverse().join(" ");
				}
			}
			
		});
	</script>
</html>

在这里插入图片描述
2.根据关键字查找功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="请输入关键字" v-model="wordKey"/>
			<ul>
				<li v-for="item in findItems":key="item">
					{{item}}
				</li>
			</ul>
		</div>
		
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
			   items:[
				   "每一天都是新得一天",
				   "每一周都很棒",
				   "这是一朵粉红色的玫瑰花"
			   ],
			   wordKey:""
			   
			},
			computed:{
				findItems:function(){
					var _this=this;
					return _this.items.filter(function(val){
						return val.indexOf(_this.wordKey)!=-1;
					})
				}
			}
		});
	</script>
</html>