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

最新推荐文章于 2024-10-25 09:38:23 发布

原创最新推荐文章于 2024-10-25 09:38:23 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

20 篇文章

订阅专栏

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

计算属性的基本使用

区别于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>