Vue.js03

最新推荐文章于 2024-07-22 15:13:59 发布

Dreamer635

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量580

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59142649/article/details/121411331

版权

一、计算属性的基本使用

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>

五、ES6补充

在ES6之前，常用的声明变量的方式

1.var 如： var b = 6;

2.function 如： function A(){…}，function是定义一个函数，实际上也相当于是创建变量的一种

方式

在ES6之后，又新增了几种声明变量的方式

1.let let关键字声明的变量具有块级作用域，如： let c = 1;

2.const const关键声明的变量，一旦已经关联值就不能再跟其它值关联，如： const n = ‘abc’;

3. import 利用import关键字导入其它模块，如：import xx from ‘./xx.js’

4.class 定义一个类：实际也是声明变量的一种，如：class B{}

let定义变量时和var有两个区别：

1.块级作用域、不会变量提升

2.不能定义在块中已有标识符同名的变量

Dreamer635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js03

一、计算属性的基本使用1.computed：属性对象中定义计算属性的方法2.使用{{方法名}}显示计算结果3.格式：(方法的返回值作为属性值)comouted:{ 方法名（）{ return this.name1+' '+this.name2}}<body> <div id="app"> <h2>{{firstName + '' + lastName}}</h2&...
复制链接

扫一扫