vue基础教学（3）

I`ivresse

已于 2022-05-24 09:40:55 修改

阅读量191

点赞数 2

文章标签： vue.js javascript elementui

于 2022-05-24 09:29:28 首次发布

本文链接：https://blog.csdn.net/Taojia9958/article/details/124934107

版权

本文详细介绍了Vue.js中的计算属性（computed）和监听器（watch）的区别与应用场景。计算属性用于根据已有数据计算出新值，并在相关数据变化时自动更新。而watch主要用于监听数据变化并执行相应操作。文中还涵盖了计算属性的简单与复杂使用、setter和getter、以及watch的完整使用方式，包括监听复杂数据类型的场景。

摘要由CSDN通过智能技术生成

一、计算属性的基本使用

1、如何使用？

computed 和 data同级，计算属性写在computed中；

写起来像方法；

用起来像属性。

2、特点（注意点）：

1）一定要有返回值。

2）可以使用data中的已知值。

3）只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属性无论如何变化，都不会导致计算属性变化。

4）计算属性名不能和data中的数据重名（因为要使用data中的数据）

3、什么时候使用？

想要根据data中的已知值，得到一个新值，并且这个新值会随着相关数据的变化而变化

<body>
		<div id="app">
			<p>{
  {firsrName}}-{
  {lastName}}</p>
			<p>{
  {getFullName()}}</p>
			<p>{
  {fullName}}</p>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:"#app",
				data() {
					return {
						firsrName:'zhang',
						lastName:'san'
					}
				},
				methods:{
					getFullName(){
						return this.firsrName+"-"+this.lastName
					}
				},
				computed:{
					fullName(){
						return this.firsrName+"-"+this.lastName
					}
				}
			})
		</script>
	</body>

二、计算属性的复杂使用

	<body>
		<div id="app">
			<p>总年龄：{
  {totalPrcie}}</p>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:"#app",
				data() {
					return {
						mark:[
							{number:2019010170004,name:'余庆伟',class:'计用三班',age:18},
							{number:2019010170001,name:'白敬亭',class:'计用一班',age:20},
							{number:2019010170002,name:'王嘉尔',class:'计用二班',age:24},
							{number:2019010170003,name:'肖战',class:'计用一班',age:28},
							{number:2019010170005,name:'鹿晗',class:'计用一班',age:33},
						]
					}
				},
				methods:{
					
				},
				computed:{
					// 方法一：for循环

最低0.47元/天解锁文章

I`ivresse

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础教学（3）

一、计算属性的基本使用<body> <div id="app"> <p>{{firsrName}}-{{lastName}}</p> <p>{{getFullName()}}</p> <p>{{fullName}}</p> </div> <script src="../../vue.js" type="text/javascript" charset="utf
复制链接

扫一扫