zoukankan html css js c++ java

vue计算属性例子

不使用计算属性

<!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的属性

查看全文

相关阅读:
用递归实现因式分解
 linux文件面试知识
 嵌入式软件面试小点
 带环链表的几个问题
 C++对象的内存布局以及虚函数表和虚基表
 手把手教你用 React Hooks 开发移动端网站，从入门到实践
 你闺女都能看懂的 Kubernetes 插画指南！
使用卷积神经网络识别交通标志
 6 个前端开发必备工具，提高你的生产力
 给新手看的 Micronaut 入门教程，10 分钟写出一个Micronaut程序

原文地址：https://www.cnblogs.com/wt7018/p/11493149.html