秋招过后，意识到自己的不足，最近又重新复习了一下codewhy老师的Vue，今天跟大家分享一下Vue插值的操作
一、计算属性的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 有时候我们开发的过程中可能会遇到这样的问题，需要连接两个字符串后显示出来，那么我们可能会先想到mastache语法 -->
<h2>{{firstName}} {{lastName}}</h2>
<!-- 或者这样 -->
<h2>{{firstName +' '+lastName}}</h2>
<!-- 不过有一点，如果这两个变量使用好多次呢？ -->
<!-- 这里我们当然自然而然地想到我可以用一个方法来解决,当然他也是可行的 -->
<h2>{{getFullname()}}</h2>
<!-- 不过mastache语法里面一般不是放值吗，放函数难免别扭，这时候就出现了计算属性 -->
<h2>{{fullname}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James',
},
computed: {
// 这里可能会有疑问，我定义的不是函数吗，调用的时候怎么不用加(),当然不用因为计算属性本质它就是属性可以直接使用
fullname() {
return this.firstName + ' ' + this.lastName
},
},
methods: {
getFullname: function () {
return this.firstName + ' ' + this.lastName
},
},
})
</script>
</body>
</html>
二、计算属性的复杂操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 有时候我们为什么要用计算属性，下面这个books数组里我们希望计算出他的总价格 -->
<!-- 那么我们当然可以用mastache语法 -->
{{books[0].price + books[1].price + books[2].price + books[3].price}}
<!-- 当然我们是可以算出来,那么如果有上百条数据我们也要这么算吗？ -->
<!-- 肯定不是，那我们用方法呗，不行用计算属性更好这是一个最终值并且有缓存性能更高 -->
<h2>{{totalSize}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
books: [
{ id: 1, name: 'Javascript高级程序设计', price: 100 },
{ id: 2, name: 'Css权威指南', price: 50 },
{ id: 3, name: 'Es6入门', price: 70 },
{ id: 4, name: 'Http权威指南', price: 100 },
],
},
computed: {
totalSize() {
// let result = 0
// 普通写法
// for (let i = 0; i < this.books.length; i++) {
// result += this.books[i].price
// }
// Es6 for-in写法
// for (let i in this.books) {
// result += this.books[i].price
// }
// Es6 for-of写法
// for (let book of this.books) {
// result += book.price
// }
// Es6 数组的reduce方法
return this.books.reduce((acc, cur) => {
acc + cur.price
}, 0)
// return result
},
},
methods: {},
})
</script>
</body>
</html>
三、计算属性的gettter和setter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant',
},
computed: {
// 实际设置计算属性里面有get和set值
fullName: {
// 但是因为是计算属性所以不希望随便设置值所以我们一般会将set方法去掉
set: function (newValue) {
// 如果我们就是要用set方法当然也可以
console.log(newValue)
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[1]
},
get: function () {
return this.firstName + ' ' + this.lastName
},
},
// 平时写的计算属性的一种简写方式,这里实际是调用了计算属性里的get方法,这也是我们使用计算属性不用加()的原因
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// },
},
methods: {},
})
</script>
</body>
</html>
可以看到我们在控制台中修改app.fullname的值之后，触发了set方法，并且成功响应到页面
四、计算属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 将data数据的两个名字拼接起来展示的方法 -->
<!-- 1.使用Mastache语法 -->
<h2>{{firstName}} {{lastName}}</h2>
<!-- 2.使用方法 -->
<h2>{{getFullName()}}</h2>
<!-- 3.使用计算属性 -->
<h2>{{fullName}}</h2>
<!-- 那么如果真的只是单纯因为调用的时候加不加()的问题来区别computed和methods的使用就毫无意义了,这里其实有一个性能的问题 -->
<!-- 我们分别使用4次来看一下 -->
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>----------------</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant',
},
computed: {
fullName: function () {
console.log('我是计算属性')
return this.firstName + ' ' + this.lastName
},
},
methods: {
getFullName: function () {
console.log('我是方法')
return this.firstName + ' ' + this.lastName
},
},
})
</script>
</body>
</html>
可以看到这里使用method的话我们每使用一次就会调用一次，而使用computed的话它会有一个缓存，只要识别到我们的属性不变会被Vue内部缓存起来，可以想象如果我们的有一个这样的method里面进行了很多次循环，然后调用多次的话我们每次都要去执行这个循环对于性能来讲有多差，而我们使用computed就不会有这个问题的存在，所以我们在日常使用的时候需要数据做一些变化然后展示到页面上的时候用尽量computed
总结
以上就是今天要跟大家分享的Vue计算属性的知识
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
