計算屬性：可以理解為能夠在里面寫一些計算邏輯的屬性悠砚。
作用：1）減少模板中的計算邏輯
2）數(shù)據(jù)緩存。當(dāng)我們的數(shù)據(jù)沒有變化時煤惩，不在執(zhí)行計算的過程
3）依賴固定的數(shù)據(jù)類型（響應(yīng)式數(shù)據(jù)）畜晰，不能是普通的傳入的一個全局?jǐn)?shù)據(jù)
轉(zhuǎn)自:https://blog.csdn.net/jdrunk/article/details/102670513
計算屬性的基本操作
<div id="app">
<h2>{{firstname+' '+lastname}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname: 'Lebanon',
lastname: 'james'
},
computed: { //04計算屬性喻犁，定義的函數(shù),盡量函數(shù)名字像屬性
fullName: function () {
return this.firstname + ' ' + this.lastname
}
},
methods: {
getfullName: function () {
return this.firstname + ' ' + this.lastname
}
}
})
// const 基本使用，保持不被修改的性質(zhì)上岗，定義標(biāo)志符必須賦值福荸，
// 常量指向的對象不能被修改，但是可以改變對象內(nèi)部的屬性
//
</script>
計算屬性的復(fù)雜操作:
<div id="app">
<h2>總價格: {{totalPrice}}</h2>
</div>
<script src="vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 110,name: 'Unix編程藝術(shù)', price: 119
},
{
id: 111,name: '代碼大全', price: 105
},
{
id: 112,name: '深入理解計算機(jī)原理', price: 139
},
{
id: 113,name: '現(xiàn)代操作系統(tǒng)', price: 89
},
]
},
computed: {
totalPrice: function () {
//fiter
let result=0;
for(let i=0;i<this.books.length;i++){
result += this.books[i].price
}
return result
// for(let i in this.books){
// this.books[i]
// }
//
// for(let book of this.books){
//
// }
}
}
})
</script>
計算屬性的setter和getter
每個計算屬性都包含一個getter和一個setter
在上面的例子中肴掷，我們只是使用getter來讀取敬锐。
在某些情況下，你也可以提供一個setter方法（不常用）呆瞻。
在需要寫setter的時候台夺，代碼如下：
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname: 'kobe',
lastname: 'Bryant'
},
computed: {
// fullName: function () {
// return this.firstname +' '+ this.lastname
// }計算屬性一般沒有set方法，只讀屬性
fullName: {
// set: function (newValue) {//實(shí)際上就是構(gòu)造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
// }
}
})
</script>
var和let區(qū)別
var 在代碼塊中定義的變量,在代碼塊外也能被使用,let在代碼塊內(nèi)定義的不能在代碼塊外使用
在ES6之前痴脾，我們都是用var來聲明變量颤介，而且JS只有函數(shù)作用域和全局作用域，沒有塊級作用域赞赖，所以{}限定不了var聲明變量的訪問范圍买窟。
例如：
{
var i = 9;
}
console.log(i); // 9
ES6新增的let，可以聲明塊級作用域的變量薯定。
{
let i = 9; // i變量只在 花括號內(nèi)有效！Ｍ骸话侄！
}
console.log(i); // Uncaught ReferenceError: i is not defined
在for循環(huán)中使用let:
<div id="app">
{{message}}
</div>
<button>按鈕3</button>
<button>按鈕3</button>
<button>按鈕3</button>
<button>按鈕3</button>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
});
//ES5之前if和for沒有塊級作用域的概念，所以主要結(jié)束function的作用圖
//但是在
//1.變量作用域 var 不存在塊級作用域的限制（if的塊級沒有作用域学赛，for的塊級也沒有作用域
//使用 閉包可以解決for塊級作用域的問題年堆，但是實(shí)際上閉包相當(dāng)于5個不同函數(shù)
var btns = document.getElementsByTagName('button');
for(var i=0; i<btns.length;i++){
(function (i) {
btns[i].addEventListener('click', function () {
console.log('第'+ i+ '個按鈕被點(diǎn)擊');
})
})(i)
// btns[i].addEventListener('click', function () {
// console.log('第'+ i+ '個按鈕被點(diǎn)擊');
// })
}
//在ES6 的let中 不需要使用閉包，使用let盏浇，具有自己的作用域变丧，
const btn = document.getElementsByTagName('button');
for(let i=0;i<btn.length;i++){
btn[i].addEventListener('click', function () {
console.log('第'+ i + '個按鈕被點(diǎn)擊');
})
}
</script>
轉(zhuǎn)自:https://blog.csdn.net/weixin_45333934/article/details/107457023
