Vue12 计算属性简写

当计算属性只有读取方法时，可以使用简写的形式，示例如下

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}span> <br/><br/>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	script>
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
42
43
44
45
46
47
48
49

相关阅读:
SAP BASIS SET_PARAMETER_ID_TOO_LONG
写页面要注意的事
Python中的推导式
ChatGPT 制作转化率分析漏斗图的制作
《python 数据可视化基础》第三章散点图 scatter
【JavaScript】内置对象 ③ ( Math 内置对象 | Math 内置对象简介 | Math 内置对象的使用 )
玻色量子CEO文凯博士出席GTIC 2022全球AI芯片峰会，解读光量子计算新进展
【cookie 临时存储数据，WebStorage ，sessionStorage】
雪碧图 css 使用方式与 Js使用方式
小白学爬虫：通过关键词搜索1688商品列表数据接口|1688商品列表数据接口|1688商品列表数据采集|1688API接口

原文地址：https://blog.csdn.net/Rockandrollman/article/details/133631713