不使用计算属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="music">

        <audio muted :src="currentSrc" autoplay="autoplay" controls="controls" @ended="nextSongs"></audio>

        <ul>

            <li v-for="(item, index) in musicArr" @click="clickHandler(item)">

                <h4>歌名: {{item.name}}</h4>

                <p>作者：{{item.author}}</p>

                <hr>

            </li>

        </ul>

    </div>

    <script src="./js/vue.js"></script>

    <script>

        var songs = [

            {id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},

            {id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},

            {id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},

            {id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}

        ]

        var mu = new Vue({

            el: "#music",

            data: {

                musicArr: songs,

                currentSrc: "./audios/1.mp3",

                currentIndex: 0,

            },

            methods:{

                clickHandler(item){

                    this.currentSrc = item.src;

                },

                nextSongs(){

                    this.currentIndex += 1;

                    this.currentSrc = this.musicArr[this.currentIndex].src;

                    console.log(this.currentSrc)

                }

            },

            computed:{},

        })

    </script>

</body>

</html>

使用计算属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="music">

        <audio :src="getSrc" autoplay="" controls=""  @ended="nextSongs"></audio>

        <ul>

            <li v-for="(item, index) in musicArr" @click="clickHandler(index)">

                <h4>歌名: {{item.name}}</h4>

                <p>作者：{{item.author}}</p>

                <hr>

            </li>

        </ul>

        <button @click="addOne">添加</button>

    </div>

    <script src="./js/vue.js"></script>

    <script>

        var songs = [

            {id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},

            {id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},

            {id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},

            {id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}

        ]

        var mu = new Vue({

            el: "#music",

            data:{

                musicArr: songs,

                currentIndex: 0,

            },

            methods: {

                clickHandler(index){

                    this.currentIndex = index;

                },

                nextSongs(){

                    this.currentIndex++;

                },

                addOne(){

                    this.musicArr.push({id:5, src:"./audios/4.mp3", name:"岁1月神偷", author:"金玟岐"})

                },

            },

            computed:{

                getSrc:{

                    set:function(newValue){},

                    get:function(){

                        return this.musicArr[this.currentIndex].src;

                    }

                },

            }

        })

    </script>

</body>

</html>

计算data的属性

vue计算属性例子的更多相关文章

  1. vue计算属性和观察者

    1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...

  2. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  3. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  4. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  5. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  6. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  7. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  8. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  9. 第三节：Vue计算属性

    计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...

随机推荐

  1. linux 短延时

    当一个设备驱动需要处理它的硬件的反应时间, 涉及到的延时常常是最多几个毫秒. 在这 个情况下, 依靠时钟嘀哒显然不对路. The kernel functions ndelay, udelay, an ...

  2. vue-learning：32 - component - 异步组件和工厂函数

    异步组件 只有在这个组件需要使用的时候才从服务器加载这一个组件模块,用于渲染,并且会把结果缓存起来供未来复用. 实现方法: 组件定义的时候,以一个工厂函数的形式传入,在需要组件的执行这个函数,然后将组 ...

  3. C# Abort() 多线程运行逻辑

    / Thread t ; Thread t2: t.Abort()执行后,会阻止主线程继续运行,但是不会影响t2线程的执行. static void Main(string[] args) { Con ...

  4. 【2016常州一中夏令营Day4】

    小 W 走迷宫[问题描述]小 W 被小 M 困在了一个方格矩阵迷宫里,矩阵边界在无穷远处,我们做出如下的假设:a. 每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b. 走过的格子立即塌陷无 ...

  5. codeforces 1165F1/F2 二分好题

    Codeforces 1165F1/F2 二分好题 传送门:https://codeforces.com/contest/1165/problem/F2 题意: 有n种物品,你对于第i个物品,你需要买 ...

  6. ArcGIS-PictureMarkerSymbol-向地图添加图片标记

    1.基于4.13 版本 <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/li ...

  7. CP防火墙导入.csv格式的对象

    Step1:将.csv格式的对象上传到管理服务器,本例为/home/admin目录 [Expert@SZ-OFFICE-SMT:0]# pwd/home/admin[Expert@SZ-OFFICE- ...

  8. 第二阶段：2.商业需求分析及BRD：2.产品需求池

    需求获取方式 比如公司战略方面的需求  用户的反馈:投诉 建议等等 产品经理需要时刻关注竞品以及行业的发展! 需求池:各个产品经理的需求总和成一个需求池.让资源更好的利用起来.有的公司还有个“需求管理 ...

  9. [Ljava.lang.String;@3e5084c9：是一个字符串数组的字节码表示

    [Ljava.lang.String;@3e5084c9:是一个字符串数组的字节码表示 打印一个字符串数组的话,会发现 String[] arr = new String[10]; // String ...

  10. mysql主从之基于mycat实现读写分离

    一 环境 1.1 结构 192.168.132.125 mycat 192.168.132.121  master 192.168.132.122  slave 主从已经配置完成 1.2 安装myca ...