目录前言计算属性总结前言 今天也是元气满满的一天,今天整理一下Vue组件的计算属性!~~开始我们的学习之旅 计算属性 先引用一张图 来看一下计算属性之间的关联: 注意:
注意: methods和computed里的东西不能重名
<div id='app'>
<audio :src="currentSrc" controls autoplay @ended='handleEnded'></audio>
<ul>
<li :class='{active:index===currentIndex}' v-for='(item,index) in musicData' :key='item.id'
@click='handleClick(item.songSrc,index)'>
<h2>{{item.id}}-歌名:{{item.name}}</h2>
<p>{{item.author}}</p>
</li>
</ul>
<button @click='handleNext'>下一首</button>
</div>
<script src="./vue.js"></script>
<script>
const musicData = [{
id: 1,
name: '杨宗纬 - 空白格',
author: '杨宗纬',
songSrc: '杨宗纬 - 空白格 (Live).mp3'
},
{
id: 2,
name: '杨宗纬 - 其实都没有',
author: '杨宗纬',
songSrc: '杨宗纬 - 其实都没有.flac'
},
{
id: 3,
name: '杨宗纬 - 我想要',
author: '杨宗纬',
songSrc: '杨宗纬 - 我想要 (Live).flac'
}
];
new Vue({
el: '#app',
data: {
musicData,
currentSrc: '杨宗纬 - 空白格 (Live).mp3',
currentIndex: 0
},
methods: {
handleClick(src, index) {
this.currentSrc = src;
this.currentIndex = index;
},
handleEnded() {
// // 下一首的播放
// this.currentIndex++;
// this.currentSrc = this.musicData[this.currentIndex].songSrc;
this.handleNext();
},
handleNext() {
this.currentIndex++;
if (this.currentIndex === this.musicData.length) {
this.currentIndex = 0;
}
this.currentSrc = this.musicData[this.currentIndex].songSrc
}
}
})
</script>
使用计算机属性还是methods取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用计算机属性,除非你不希望得到缓存。
到此这篇关于VUE 组件的计算属性详解的文章就介绍到这了,更多相关VUE 组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: VUE 组件的计算属性详解
本文链接: https://www.lsjlt.com/news/152507.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0