1.计算属性
Vue中的computed属性称为计算属性.它与methods不同,computed是响应式的,调用时要向属性那样访问;同时computed是带缓存的,并不是每次调用时都会执行.
- 练习1
<body>
<div id="app">
<button type="button" @click="git1">点击methods</button>
<button type="button" @click="git2()">点击computed</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name1:'这是vue.js,的methods计算属性练习',
name2:'这是vue.js,的computed计算属性练习'
},
methods:{
git1:function(){
alert(this.name1)
console.log(this.name1)
}
},
computed:{
git2:function(){
alert(this.name2)
console.log(this.name2)
}
}
})
</script>
</body>
通过上列代码可知computed的执行方式,如果git2()不加括号,那么执行该代码是,git2()会预执行,然后就没办法调用了
- 练习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">总价:{{totalPrice}}￥</h3>
<button type="button" @click="handleClick" :disabled="show" class="but">结算</button>
</div>
<p v-if="show">共购买商品{{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>
效果图
由于产品个数是双向绑定,所以可以添加或减少,而computed中引用的响应式属性发生变化后,总价和产品个数才会发生变化,其中:disabled如果一个元素不能被激活或获取焦点，则该元素处于被禁用状态。
- 过滤器
vue是需要自定义过滤器的
<body>
<div id="app">
<div class="container">
<input type="text" v-model="searchString" placeholder="请输入"/>
<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": "https://www.jianshu.com/p/e83e7999346b",
"infor": "一款在线免费GIF编辑神器，提供在线GIF压缩、视频转GIF、GIF合成、GIF裁剪四个功能，用户无需安装任何插件就可以轻松的进行视频格式转换...",
"image": "https://upload-images.jianshu.io/upload_images/11438996-56b25f32c9307b4b?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
},
{
"title": "经典面试题：从 URL 输入到页面展现到底发生什么？",
"url": "https://www.jianshu.com/p/45ba3e0d0c7e",
"infor": "打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！",
"image": "https://upload-images.jianshu.io/upload_images/3973862-d90954249a6f6ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"
},
{
"title": "如何免翻墙使用谷歌搜索和Chrome应用商店",
"url": "https://www.jianshu.com/p/484f8e6c88f6",
"infor": "可能大家都听过或正在使用谷歌浏览器，但是由于某种原因只能在谷歌浏览器使用百度搜索引擎，至于什么谷歌搜索引擎、谷歌商城、Gmail邮箱统...",
"image": "https://upload-images.jianshu.io/upload_images/858154-015a4b083685a3d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/800/format/webp"
},
{
"title": "四款前所未有好用的黑科技APP，绝对的良心实用，赶紧告诉家人",
"url": "https://www.jianshu.com/p/2aec84d269fe",
"infor": "手机微信、支付宝、淘宝等应用都是我们经常会使用到的APP，除此之外，我们就来就给...",
"image": "https://upload-images.jianshu.io/upload_images/16042993-168b2cb17fd7ec0c?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
},
{
"title": "坚持学英语的方法有哪些",
"url": "https://www.jianshu.com/p/0a6a61b0933c",
"infor": "学习英语没有什么捷径，至少我认为，我一直以来都是自学英语，从没有听过课堂上老师是怎么讲英语的，都是通过听广播和看视频学会的。我想说...",
"image": "https://upload-images.jianshu.io/upload_images/3525704-c7293758fc59e56b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/960/format/webp"
}
]
},
computed: {
// 计算函数，匹配搜索
filteredArticles: function() {
var articles_array = this.articles,
searchString = this.searchString;
//搜索关键词为空,则返回原始数据集
if (!searchString) {
return articles_array;
}
//搜索关键词去除无用空格,转换为小写
searchString = searchString.trim().toLowerCase();
//过滤数组中每个元素
articles_array = articles_array.filter(function(item) {
if (item.title.toLowerCase().indexOf(searchString) !== -1) {
return item;
}
})
// 返回转化后的数组
return articles_array;
}
}
})
</script>
</body>
如上,在computed中filter()会过滤掉除了item以外的所有元素,最后返回的数组就只剩下了含item元素的数组
