vue-one_demo_music
简单的音乐盒子
利用计算属性(监听数据)，解决上一首，下一首，点击切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
} body {
line-height: 1;
} ol, ul {
list-style: none;
} blockquote, q {
quotes: none;
} blockquote:before, blockquote:after,
/* 清除浮动*/
q:before, q:after {
content: '';
content: none;
} table {
border-collapse: collapse;
border-spacing: 0;
}
li{
border: 2px solid deepskyblue;
padding: 5px;
}
</style>
</head>
<body>
<!-- autoplay 自动播放 调整音量 自动循环 @ended 自动下一首 -->
<div id="music">
<!-- :scr 要链接下面的数据 要通过指令系统-->
<audio :src="currentSong" autoplay controls autoloop @ended = 'nextSong()'></audio>
<ul>
<!-- 点击换歌 -->
<li v-for = '(item, i) in songs' @click = "currentHandler(i)">
<h3>作者:{{item.author}}</h3>
<p>{{item.name}}</p>
</li>
</ul>
<button @click = 'upSong'>上一首</button> <!-- 方法名，不加参数可以不写() -->
<button @click = 'nextSong'>下一首</button>
<button @click = 'addSong'>添加</button>
<!-- @click 方法-->
</div> <!--MVVM Model==》数组 数据库 View == document 标签 上面的div VM--> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 数据的双向绑定 m<=>v
var songs = [
{id:1,src:'./audios/audios/1.mp3',name:"水瓶座",author:'陈晓东'},
{id:2,src:'./audios/audios/2.mp3',name:"倾城",author:'陈奕迅'},
{id:3,src:'./audios/audios/3.mp3',name:"海阔天空",author:'Beyond'},
{id:4,src:'./audios/audios/4.mp3',name:"我很快乐",author:'刘惜君'} ];
var music = new Vue({
el:'#music',
data:{
// 数据属性Model
songs : songs,
// currentSong : "./audios/audios/1.mp3",
index:0
},
methods:{
// 事件名方法要在这里声明
currentHandler(i){ // 点击歌名换歌
this.index = i; // 这里绑定了数据属性，一改就调动下面的计算属性
// this.currentSong = this.songs[i].src;
},
nextSong(){
this.index++;
// this.currentSong = this.songs[this.index].src;
},
upSong(){
this.index = this.index-1;
// this.currentSong = this.songs[this.index].src;
},
addSong(){
this.songs.push( {id:5,src:'./audios/audios/4.mp3',name:"我很快乐",author:'刘惜君'})
}
},
computed:{ // 计算属性，实行监听
currentSong(){
return this.songs[this.index].src
}
}
})
</script>
</body>
</html>
vue-one_demo_music的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- Caffe学习笔记（二）：Caffe前传与反传、损失函数、调优
Caffe学习笔记(二):Caffe前传与反传.损失函数.调优 在caffe框架中,前传/反传(forward and backward)是一个网络中最重要的计算过程:损失函数(loss)是学习的驱动 ...
- Apache ab 测试结果的分析
以前安装好APACHE总是不知道该如何测试APACHE的性能,现在总算找到一个测试工具了.就是APACHE自带的测试工具AB(apache benchmark).在APACHE的bin目录下.格式: ...
- BZOJ4765: 普通计算姬
BZOJ4765: 普通计算姬 题目描述 传送门 题目分析 求的和非常奇怪,不具有连续性,所有上树的数据结构全死了. 考虑分块,思考对于一段连续的询问区间可以直接询问整块,零散块可以在树上dfs序暴力 ...
- 06_zookeeper_原生API使用2
1. 设置znode节点数据(同步) import org.apache.zookeeper.*; import org.apache.zookeeper.data.Stat; import java ...
- nginx的坑-org.apache.http.TruncatedChunkException: Truncated chunk( expected size: 7752; actual size: 4077)
org.apache.http.TruncatedChunkException: Truncated chunk 项目中使用请求远程接口报错 ,项目是Spring-boot的,两个项目(A和B) , ...
- 使用GEOquery下载GEO数据--转载
最近需要下载一大批GEO上的数据,问题是我要下载的Methylation数据根本就没有sra文件,换言之不能使用Aspera之类的数据进行下载.但是后来我发现了GEOquery这个不错的R包,不知道是 ...
- 使用bootstrap时碰到问题$(...).modal is not a function
我出现这个问题是,因为bootstrap没有正确引入. 除了bootstrap的路径需要被正确引入外,它引入时还要放在jquery.js后面,否则也会报这个错误.
- 又是新动作！微信小程序专属二维码出炉
又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者 ...
- mysql数据库优化课程---14、常用的sql技巧
mysql数据库优化课程---14.常用的sql技巧 一.总结 一句话总结:其实就是sql中那些函数的使用 1.mysql中函数如何使用? 选择字段 其实就是作用域select的选择字段 3.转大写: ...
- webstrom提示不见了
今天做项目时候,不知道怎么搞的我的神编辑器webstrom没有了代码提示!!! 重启软件.重启电脑甚至卸载重装都不行,研究了半天终于知道问题出在了哪: 后来我发现在Webstorm的菜单[File]里 ...