Vue之计算属性computed

最新推荐文章于 2023-08-30 11:19:19 发布

ljljlj1993

最新推荐文章于 2023-08-30 11:19:19 发布

阅读量163

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ljljlj1993/article/details/90666489

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、什么是计算属性

计算属性是vue特带的computed，可以进行运算和函数的调用

2、如何使用

1、可以依赖多个vue实例
2、可以依赖其他vue实例
ps：可以直接复制代码运行

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例9计算属性的用法</title>
	</head>
	<body>
		<div id="app1">
			<br> 使用自己的vue计算属性：{{test2}}
		</div>
		<div id="app2">
			其他vue数据使用计算属性：{{reversedText}}
			<br>未使用计算属性：{{app1.text.split(',').reverse().join(',')}}
			<br>使用多个vue数据计算属性：{{reversedTexts}}

		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app1 = new Vue({
				el: '#app1',
				data: {
					text: '123,456'
				},
				computed: {
					test2: function() {
						return this.text.split(',').reverse().join(',') //依赖自己这个vue的实例
					}
				}

			})

			var app2 = new Vue({
				el: '#app2',
				data: {
					text: '987,456',
					addMore: ''
				},
				computed: {
					reversedText: function() {
						return app1.text.split(',').reverse().join(',') //依赖其他vue实例
					},
					//计算属性还可以依赖多个Vue 实例的数据
					reversedTexts: function() {
						this.addMore += app1.text.split(',').reverse().join(',');
						this.addMore += this.text.split(',').reverse().join(',')
						return this.addMore;
					}
				}
			})
		</script>
	</body>
</html>

运行结果如下
在这里插入图片描述

说明

在这里插入图片描述

参考网址：https://www.cnblogs.com/chaixiaozhi/p/8688820.html

ljljlj1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之计算属性computed

1、什么是计算属性计算属性是vue特带的computed，可以进行运算和函数的调用2、如何使用1、可以依赖多个vue实例2、可以依赖其他vue实例ps：可以直接复制代码运行<html> <head> <meta charset="utf-8"> <title>Vue 示例9计算属性的用法</title> </...
复制链接

扫一扫