Vue2.x计算属性

最新推荐文章于 2024-06-01 15:46:07 发布

程序元单单

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量471

点赞数 8

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/shanxiwei01/article/details/137570497

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.计算属性

在Vue 插值表达式内实现一些操作其实非常便利，但如果表达式的逻辑过于复杂，会让插值过于臃肿且难以维护。这时可以考虑使用Vue的计算属性

1.1 不使用计算属性的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的计算属性</title>
		<script src="js/vue2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- split('')将字符串分割成一个列表
			     reverse()方法将列表倒序排列
				 join('')将列表转成字符串 -->
			<br>
			{{message.split('').reverse().join('')}}
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"123456"
				}
			})
		</script>
	</body>
</html>

在以上代码中，插值不再是简单的声明式逻辑，而是用了三个方法实现字符串的反转。

1.2 使用计算属性

计算属性一般在选项对象的computed中以函数的形式进行声明，然后再插值中写函数名进行调用，这样方便代码的修改与维护，也可以进行复用

		<div id="app">
			<!-- split('')将字符串分割成一个列表
			     reverse()方法将列表倒序排列
				 join('')将列表转成字符串 -->
			<p>不使用计算属性：{{message.split('').reverse().join('')}}</p>
			<p>使用计算属性：{{reverseMessage}}</p>			
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"123456"
				},
				computed:{
					reverseMessage(){
						return this.message.split('').reverse().join('');
					}
				}
			})
		</script>

在以上代码中，声明了一个计算属性reverseMessage，可以像给绑定普通属性一样将数据绑定到模板的计算属性。Vue会监测到app.reverseMessage 依赖于app.message,因些当message属性发生变化时，所以依赖reverseMessage的绑定也会更新。

程序元单单

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue2.x计算属性

在以上代码中，声明了一个计算属性reverseMessage，可以像给绑定普通属性一样将数据绑定到模板的计算属性。Vue会监测到app.reverseMessage 依赖于app.message,因些当message属性发生变化时，所以依赖reverseMessage的绑定也会更新。计算属性一般在选项对象的computed中以函数的形式进行声明，然后再插值中写函数名进行调用，这样方便代码的修改与维护，也可以进行复用。在以上代码中，插值不再是简单的声明式逻辑，而是用了三个方法实现字符串的反转。
复制链接

扫一扫