01 Vue 计算属性的基本使用

最新推荐文章于 2024-07-17 17:57:11 发布

旭旭不会踢球

最新推荐文章于 2024-07-17 17:57:11 发布

阅读量186

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/xx0822_/article/details/124930573

版权

页面渲染的基本方法

1.直接拼接 <h2>{{firstName}}-{{lastName}}</h2>

2.使用调用方法 <h2>{{getFullName()}}</h2>

3.使用计算属性 <h2>{{fullName}}</h2>

（调用方法和计算属性书写的区别是：计算属性在页面渲染时不需要加( ) ）

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<h2>{{firstName}}-{{lastName}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{fullName}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						firstName: 'zhang',
						lastName: 'san'
					}
				},
				methods: { //调用方法
					getFullName() {
						return this.firstName + '-' + this.lastName
					}
				},
				computed: { //计算属性
                    fullName(){ 
						return this.firstName + '-' + this.lastName
					}
				},
				watch: { //侦听器 监听

				}
			})
		</script>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

旭旭不会踢球

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01 Vue 计算属性的基本使用

页面渲染的基本方法1.直接拼接 <h2>{{firstName}}-{{lastName}}</h2>2.使用调用方法 <h2>{{getFullName()}}</h2>3.使用计算属性 <h2>{{fullName}}</h2>（调用方法和计算属性书写的区别是：计算属性在页面渲染时不需要加( ) ）代码演示：<!DOCTYPE html><...
复制链接

扫一扫