【学习笔记】12-计算属性的基本使用

最新推荐文章于 2025-05-29 10:11:45 发布

腌咸鱼

最新推荐文章于 2025-05-29 10:11:45 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/wersdf22/article/details/108662722

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍Vue.js中计算属性的基本使用方法，通过实例演示如何利用计算属性简化模板中的表达式，提高代码可读性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性的基本使用

区别于methods的命名规范，一般不带有动词get，而是直接用

示例

<div id="app">
	<h1>{{firstName}} {{lastName}}</h1>
	<h1>{{fullName}}</h1>
	<h1>{{fullName}}</h1>
	<h1>{{fullName}}</h1>
	<h1>{{fullName}}</h1>
	<h1>{{fullName}}</h1>
</div>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			firstName:"你好",
			lastName:"世界",
		},
		computed:{
			fullName:function(){
				return this.firstName + " " + this.lastName
			}
		},
		methods:{
			
		}
	})
</script>