[JavaScript知识库] Vue.js03

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue.js03 -> 正文阅读

[JavaScript知识库]Vue.js03

一、计算属性的基本使用

1.computed：属性对象中定义计算属性的方法

2.使用{{方法名}}显示计算结果

3.格式：(方法的返回值作为属性值)

comouted:{

? ? ? ? 方法名（）{

? ? ? ? ? ? ? ? return this.name1+' '+this.name2

????????}

}

<body>
	<div id="app">
		<h2>{{firstName + '' + lastName}}</h2>//方法一
		<h2>{{firstName}} {{lastName}}</h2>//方法二
		<h2>{{getFullName()}}</h2>//方法三
		<h2>{{fullName}}</h2>//方法四：计算属性
	</div>
	<script src="../js/vue.js"></script>
	<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				firstName:'Lebron',
				lastName:'James'
			},
			//计算属性
			computed:{
				fullName:function(){
					return this.firstName + '' + this.lastName
				}

			},
			methods:{
				getFullName(){
					return this.firstName + '' + this.lastName

				}
			}
		})
	</script>

</body>

二、计算属性复杂操作示例

<body>
	<div id="app">
		<h2>总价格：{{totalPrice}}</h2>
	</div>
	<script src="../js/vue.js"></script>
	<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				books:[
					{id:110,name:'苦难辉煌',price:50},
					{id:111,name:'离散数学',price:60},
					{id:112,name:'大学物理',price:70},
					{id:113,name:'数据结构教程',price:80},
				]
			},
			//计算属性
			computed:{
				totalPrice:function(){
					let result =0
					for(let i=0;i<this.books.length;i++){
						result +=this.books[i].price
					}
					return result
				}

			},
	</script>
</body>

三、计算属性的setter和getter

1.每个计算属性都包含一个getter和setter，通过 getter/setter 实现对属性数据的显示和监视

2.一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值

3.计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，其完整代码如下：

computed: {
    fullName: {
      get(){
         return this.firstName + ' ' + this.lastName
      }
    }
  }

4.计算属性包含setter和getter的完整写法

<body>
	<div id="app">
		<h2>总价格：{{totalPrice}}</h2>
	</div>
	<script src="../js/vue.js"></script>
	<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				firstName:'Lebron',
				lastName:'James'
			},
			//计算属性
			//计算属性一般是没有set方法，只读属性
			//计算属相的完整写法
			computed:{
				fullName:{
					
					set:function(newValue){
						//console.log('------',newValue);
						const names = newValue.split('');
						this.firstName=names[0];
						this.lastName=names[1];
					},
					get:function(){
						return this.firstName + '' + this.lastName
					}
					
				}

			},
		}
	</script>
</body>

四、计算属性与methods的比较

1.计算属性和methods的执行结果都是相同的

2.当计算属性没有依赖data中的数据时，第一次使用计算属性时，会把第一次的结果进行缓存，后?

? ?面再次使用计算属性，都会去第一次的结果中进行查找

3.methods方法，每调用一次，就会触发一次，计算属性只调用一次

4.计算属性的用法与data中的数据用法一样，因此计算属性在使用时，不加 ( )

5.methods方法在调用时，( ) 可加可不加

6.计算属性具有缓存功能，methods方法没有

<body>
	<div id="app">
		<h2>{{firstName + '' + lastName}}</h2>//方法一直接拼接，语法过于繁琐
		<h2>{{firstName}} {{lastName}}</h2>//方法二:直接拼接，语法过于繁琐
		<h2>{{getFullName()}}</h2>//方法三：methods
		<h2>{{fullName}}</h2>//方法四：计算属性
	</div>
	<script src="../js/vue.js"></script>
	<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				firstName:'Lebron',
				lastName:'James'
			},
			//计算属性
			computed:{
				fullName:function(){
					console.log('fullName');//调用四次
					return this.firstName + '' + this.lastName
				}

			},
			methods:{
				getFullName(){
					console.log('getFullName');//调用一次
					return this.firstName + '' + this.lastName

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