简单的音乐盒子

利用计算属性(监听数据)，解决上一首，下一首，点击切换

<!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的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. 推荐个非常简单好用的AOP -- MrAdvice

    https://github.com/ArxOne/MrAdvice 太简单了,写好自己的处理类, 作为Attribute加到要拦截的方法或者类上就可以了. Here is the minimal s ...

  2. elasticsearch系列（七）java定义score

    概述 ES支持groovy 和 java两种语言自定义score的计算方法,groovy甚至可以嵌套在请求的参数中,有点厉害,不过不在本篇讨论范围. 如何用自定义的java代码来定义score如何产生 ...

  3. Spring Boot JPA 使用 Sql Service 与 不使用默认驼峰策略

    引入 数据源 <dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId>s ...

  4. Gym - 100712B Rock-Paper-Scissors

    https://vjudge.net/problem/Gym-100712B 题意: 石头剪刀布游戏. 给出一个玩家n局的出的顺序,现在另一个是这样出的,X+Y+Z=n,在前X轮出石头,中间Y轮出布, ...

  5. codeforces741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. 浅谈NodeJs的模块机制

    J历史 我们都知道,js在刚被创建的时候,只是为了在网页上写一些小脚本而已,比如网页特效,表单验证等等,创立者也许没觉悟到以后的js会发展到如此规模.这是web1.0时代. 在web 2.0时代,各种 ...

  7. Oracle数据库报错: ORA-29275:部分多字节字符

    Oracle数据库报错: ORA-29275:部分多字节字符 就是你查出来的字符串(有汉字的)有可能会出问题, 在认为有问题的字段 用 to_nchar("字段")包起来 比如 你 ...

  8. IP地址分类、私有地址、子网、子网掩码

    IP地址分类介绍 这里讨论IPv4,IP地址分成了A类.B类.C类.C类.E类,如下图所示: 解释: A类以0开头,网络地址有7位,主机地址有24位,举例:A类地址:0 10000000 000000 ...

  9. html合并单元格

    在合并的首位置加上colspan或者rowspan属性即可 code: <html>   <body>   <h4>横跨两列的单元格:</h4> < ...

  10. Ansible 小手册系列 十一（变量）

    变量名约束 变量名称应为字母,数字和下划线. 变量应始终以字母开头. 变量名不应与python属性和方法名冲突. 变量使用 通过命令行传递变量(extra vars) ansible-playbook ...