1.計(jì)算屬性
Vue中的computed屬性稱為計(jì)算屬性.它與methods不同,computed是響應(yīng)式的,調(diào)用時(shí)要向?qū)傩阅菢釉L問;同時(shí)computed是帶緩存的,并不是每次調(diào)用時(shí)都會(huì)執(zhí)行.
- 練習(xí)1
<body>
<div id="app">
<button type="button" @click="git1">點(diǎn)擊methods</button>
<button type="button" @click="git2()">點(diǎn)擊computed</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name1:'這是vue.js,的methods計(jì)算屬性練習(xí)',
name2:'這是vue.js,的computed計(jì)算屬性練習(xí)'
},
methods:{
git1:function(){
alert(this.name1)
console.log(this.name1)
}
},
computed:{
git2:function(){
alert(this.name2)
console.log(this.name2)
}
}
})
</script>
</body>
通過上列代碼可知computed的執(zhí)行方式,如果git2()不加括號(hào),那么執(zhí)行該代碼是,git2()會(huì)預(yù)執(zhí)行,然后就沒辦法調(diào)用了
- 練習(xí)2
<body>
<div id="app">
<div class="container">
<div class="item" v-for="goods in goodsList">
<div class="item-id">
{{goods.id}}
</div>
<div class="item-ava">
<a v-bind:href="goods.url"><img :src="goods.ava" width="30px"></a>
</div>
<div class="item-name">
{{goods.name}}
</div>
<div class="item-price">
{{goods.price}}
</div>
<div class="item-count">
<button type="button" @click="goods.count -= 1" :disabled="goods.count ===0||show">-</button>
<input type="text" v-model="goods.count" class="goods-count" />
<button type="button" @click="goods.count += 1" :disabled="show">+</button>
</div>
</div>
<hr>
<div class="other">
<h3 class="pr">總價(jià):{{totalPrice}}￥</h3>
<button type="button" @click="handleClick" :disabled="show" class="but">結(jié)算</button>
</div>
<p v-if="show">共購(gòu)買商品{{settlement}},共需支付:￥{{totalPrice}}</p>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
goodsList: [{
id: 1,
ava:'https://img.alicdn.com/imgextra/i3/13022581/O1CN01rnYEL91Uw8k0wAjU9_!!0-saturn_solar.jpg_240x240xz.jpg_.webp',
url:'https://detail.tmall.com/item.htm?id=580731960102&ali_refid=a3_430676_1006:1102515942:N:iphone%208:347c644f4a493b4d035f9f02db5f7ede&ali_trackid=1_347c644f4a493b4d035f9f02db5f7ede&spm=a231o.7712113/d.1004.1',
name: 'iphone 8',
price: 6000,
count: 1
}, {
id: 2,
ava:'https://img.alicdn.com/imgextra/i3/13022581/O1CN01rnYEL91Uw8k0wAjU9_!!0-saturn_solar.jpg_240x240xz.jpg_.webp',
url:'https://detail.tmall.com/item.htm?id=583972739234&ali_refid=a3_430676_1006:1102515942:N:apple%20x:9b5c2bb520cac851535eaf392aa45888&ali_trackid=1_9b5c2bb520cac851535eaf392aa45888&spm=a231o.7712113/d.1004.1',
name: 'iphone x',
price: 7000,
count: 1
}, {
id: 3,
ava:'https://img.alicdn.com/imgextra/i2/124432566/O1CN013XtsEY1UpGntTaVCu_!!0-saturn_solar.jpg_240x240xz.jpg_.webp',
url:'https://detail.tmall.com/item.htm?id=586330226433&ali_refid=a3_430676_1006:1150882196:N:iphone+x+max:22c28f58e18f669e791312d96439c840&ali_trackid=1_22c28f58e18f669e791312d96439c840&spm=a231o.7712113%2Fd.1004.128',
name: 'iphone xs Max',
price: 8000,
count: 1
}],
show:false
},
methods: {
handleClick:function(){
this.show = ! this.show;
}
},
computed: {
totalPrice: function() {
var totalPrice = 0;
for (var i = 0, len = this.goodsList.length; i < len; i++) {
totalPrice += this.goodsList[i].price * this.goodsList[i].count;
}
return totalPrice;
},
settlement: function() {
this.show = true;
var totalCount = 0;
var len = this.goodsList.length;
for (var i = 0; i < len; i++) {
totalCount += this.goodsList[i].count;
}
return totalCount;
}
}
})
</script>
</body>
效果圖
由于產(chǎn)品個(gè)數(shù)是雙向綁定,所以可以添加或減少,而computed中引用的響應(yīng)式屬性發(fā)生變化后,總價(jià)和產(chǎn)品個(gè)數(shù)才會(huì)發(fā)生變化,其中:disabled如果一個(gè)元素不能被激活或獲取焦點(diǎn)融痛，則該元素處于被禁用狀態(tài)。
- 過濾器
vue是需要自定義過濾器的
<body>
<div id="app">
<div class="container">
<input type="text" v-model="searchString" placeholder="請(qǐng)輸入"/>
<button type="button" @click="tf"">搜索</button>
<div class="item" v-for="article in filteredArticles" >
<div class="item-title">
<a :href="article.url" target="_blank">
{{article.title}}
</a>
<a :href="article.url" target="_blank">
<p>
{{article.infor}}
</p>
</a>
</div>
<div class="item-thumbnail">
<img :src="article.image">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
searchString: "",
show:true,
articles: [{
"title": "堪稱神器的3款在線工具神僵，你一定用得上雁刷！",
"url": "http://www.reibang.com/p/e83e7999346b",
"infor": "一款在線免費(fèi)GIF編輯神器，提供在線GIF壓縮保礼、視頻轉(zhuǎn)GIF沛励、GIF合成责语、GIF裁剪四個(gè)功能，用戶無需安裝任何插件就可以輕松的進(jìn)行視頻格式轉(zhuǎn)換...",
"image": "https://upload-images.jianshu.io/upload_images/11438996-56b25f32c9307b4b?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
},
{
"title": "經(jīng)典面試題：從 URL 輸入到頁面展現(xiàn)到底發(fā)生什么目派？",
"url": "http://www.reibang.com/p/45ba3e0d0c7e",
"infor": "打開瀏覽器從輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)在大家面前坤候，背后到底發(fā)生了什么？經(jīng)歷怎么樣的一個(gè)過程企蹭？先給大家來張總體流程圖白筹，具體步驟請(qǐng)看下文分解！",
"image": "https://upload-images.jianshu.io/upload_images/3973862-d90954249a6f6ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"
},
{
"title": "如何免翻墻使用谷歌搜索和Chrome應(yīng)用商店",
"url": "http://www.reibang.com/p/484f8e6c88f6",
"infor": "可能大家都聽過或正在使用谷歌瀏覽器谅摄，但是由于某種原因只能在谷歌瀏覽器使用百度搜索引擎徒河，至于什么谷歌搜索引擎、谷歌商城送漠、Gmail郵箱統(tǒng)...",
"image": "https://upload-images.jianshu.io/upload_images/858154-015a4b083685a3d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/800/format/webp"
},
{
"title": "四款前所未有好用的黑科技APP顽照，絕對(duì)的良心實(shí)用，趕緊告訴家人",
"url": "http://www.reibang.com/p/2aec84d269fe",
"infor": "手機(jī)微信闽寡、支付寶代兵、淘寶等應(yīng)用都是我們經(jīng)常會(huì)使用到的APP，除此之外爷狈，我們就來就給...",
"image": "https://upload-images.jianshu.io/upload_images/16042993-168b2cb17fd7ec0c?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
},
{
"title": "堅(jiān)持學(xué)英語的方法有哪些",
"url": "http://www.reibang.com/p/0a6a61b0933c",
"infor": "學(xué)習(xí)英語沒有什么捷徑植影，至少我認(rèn)為，我一直以來都是自學(xué)英語涎永，從沒有聽過課堂上老師是怎么講英語的思币，都是通過聽廣播和看視頻學(xué)會(huì)的。我想說...",
"image": "https://upload-images.jianshu.io/upload_images/3525704-c7293758fc59e56b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/960/format/webp"
}
]
},
computed: {
// 計(jì)算函數(shù)土辩，匹配搜索
filteredArticles: function() {
var articles_array = this.articles,
searchString = this.searchString;
//搜索關(guān)鍵詞為空,則返回原始數(shù)據(jù)集
if (!searchString) {
return articles_array;
}
//搜索關(guān)鍵詞去除無用空格,轉(zhuǎn)換為小寫
searchString = searchString.trim().toLowerCase();
//過濾數(shù)組中每個(gè)元素
articles_array = articles_array.filter(function(item) {
if (item.title.toLowerCase().indexOf(searchString) !== -1) {
return item;
}
})
// 返回轉(zhuǎn)化后的數(shù)組
return articles_array;
}
}
})
</script>
</body>
如上,在computed中filter()會(huì)過濾掉除了item以外的所有元素,最后返回的數(shù)組就只剩下了含item元素的數(shù)組
