vue.js计算属性的基本使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>计算属性的基本使用title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			
			<h2>{{firstname+' '+lastname}}h2>
			<h2>{{firstname}} {{lastname}}h2>
			
			<h2>{{getFullName()}}h2>
			
			<h2>{{FullName}}h2>
		div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					firstname:"pangtou",
					lastname:"xiaonaihu"
				},
				// computed:计算机属性()
				computed:{
					FullName:function() {
						return this.firstname+' '+this.lastname;
					}
				},
				methods:{
					getFullName:function() {
						return this.firstname+' '+this.lastname;
					}
				}
			});
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

效果图

在这里插入图片描述

相关阅读:
单例设计模式，各种排序复习
LeetCode+ 81 - 85 单调栈专题
CSP-S2023 总结
Stable-Diffusion-WebUI 常用提示词插件
Java Kotlin 循环反射一行代码完美实现多层反射
同时安装python2和3解决方案
Windows系统提示“ping”不是内部或外部命令，也不是可运行的程序或批处理文件解决办法
Go 语言向函数传递数组
坚鹏：中国邮储银行金融科技前沿技术发展与应用场景第3期培训
Nginx基础之负载均衡实践篇

原文地址：https://blog.csdn.net/weixin_55804957/article/details/128176643