您的位置: 首页  >  IT文章  >  vue篇 2、简单的轮播图 ajax、简单的音乐播放器、计算属性computed

vue篇 2、简单的轮播图 ajax、简单的音乐播放器、计算属性computed

分类: IT文章 • 2024-01-24 11:25:07

手动轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">

    <img :src="images[urrentIndex].imgSrc" alt="">
<button @click="nextP">下一张</button>
<button @click="lastP">上一张</button>
</div>


<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#d1',
        data(){
            return{

                images:[
                    {id:1,imgSrc:'./1.jpg'},
                    {id:1,imgSrc:'./2.jpg'},
                    {id:1,imgSrc:'./3.jpg'},
                    {id:1,imgSrc:'./4.jpg'},
                    {id:1,imgSrc:'./5.jpg'},
                ],
                urrentIndex:0
            }


        },
        methods:{
            nextP(){

                    if(this.urrentIndex === 4){
                        this.urrentIndex =0;
                    }else {this.urrentIndex++;}
            },
            lastP(){

                if(this.urrentIndex === 0){
                    this.urrentIndex =4;
                }else {  this.urrentIndex--;}
            }
        }
    })
</script>
</body>
</html>
View Code

cdn :

www.bootcdn.cn 

利用vue的created() 钩子 和setInterval来实现自动轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">

    <img :src="images[urrentIndex].imgSrc" alt="">
<button @click="nextP">下一张</button>
<button @click="lastP">上一张</button>
</div>


<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#d1',
        data(){
            return{

                images:[
                    {id:1,imgSrc:'./1.jpg'},
                    {id:1,imgSrc:'./2.jpg'},
                    {id:1,imgSrc:'./3.jpg'},
                    {id:1,imgSrc:'./4.jpg'},
                    {id:1,imgSrc:'./5.jpg'},
                ],
                urrentIndex:0
            }


        },
        methods:{
            nextP(){

                    if(this.urrentIndex === 4){
                        this.urrentIndex =0;
                    }else {this.urrentIndex++;}
            },
            lastP(){

                if(this.urrentIndex === 0){
                    this.urrentIndex =4;
                }else {  this.urrentIndex--;}
            }
        }
        ,
        created(){
            setInterval(()=>{
                if(this.urrentIndex === 3){
                        this.urrentIndex =0;
                    }else {this.urrentIndex++;}

            },3000);
        }
    })
</script>
</body>
</html>
View Code

ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">

    {{ List }}--{{ x1 }}
</div>


<script src="./vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
    new Vue({
        el:'#d1',
        data(){
            return{
                    List:[] ,
                        x1:2,
            }
        },
        methods:{
            nextP(){

                    if(this.urrentIndex === 4){
                        this.urrentIndex =0;
                    }else {this.urrentIndex++;}
            },
            lastP(){

                if(this.urrentIndex === 0){
                    this.urrentIndex =4;
                }else {  this.urrentIndex--;}
            }
        }
        ,
        created(){


            $.ajax({
                url:"https://api.apiopen.top/getJoke?page=1&count=2&type=video",
                type:'get',
                success:(data)=>{
                    console.log(data);
                    if(data.code=='200'){
                        console.log(data.result);
                        this.List = data.result;
                        console.log(this.List);
                    }

                },
                error:(err)=>{
                  console.log(err);
                }
            })
        }
    })
</script>
</body>
</html>
View Code

简单的音乐播放器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul li.active{
            background-color: darkcyan;
        }
    </style>
</head>
<body>
<div id="music">
    <!--@ended 播放完成 会自动调用该方法-->
    <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio>
    <ul>
        <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'>
            <h2>歌手：{{ item.author }}</h2>
            <p>歌名：{{ item.name }}</p>
        </li>
    </ul>
</div>
<script src="./vue.js"></script>
<script>
    var musicData = [{
        id: 1,
        name: '于荣光 - 少林英雄',
        author: '于荣光',
        songSrc: './static/于荣光 - 少林英雄.mp3'
    },
        {
            id: 2,
            name: 'Joel Adams - Please Dont Go',
            author: 'Joel Adams',
            songSrc: './static/Joel Adams - Please Dont Go.mp3'
        },
        {
            id: 3,
            name: 'MKJ - Time',
            author: 'MKJ',
            songSrc: './static/MKJ - Time.mp3'
        },
        {
            id: 4,
            name: 'Russ - Psycho (Pt. 2)',
            author: 'Russ',
            songSrc: './static/Russ - Psycho (Pt. 2).mp3'
        }
    ];

    new Vue({
        el: '#music',
        data() {
            return {
                musicData:[],
                currentIndex:0
            }

        },
        methods:{
            songHandler(i){
                this.currentIndex = i;
            },
            nextHanlder(){
                this.currentIndex++;
            }
        },

        created(){
            this.musicData = musicData
        }
    })
</script>
</body>
</html>
View Code

计算属性 （简化{{ }}内的显示，容易维护）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <p>{{ myMsg }}</p>
    <button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                msg: "alex",
                age: 18
            }

        },
        created() {
            //定时器  ajax  库 function(){}
            setInterval(() => {

            })
        },
        methods: {
            clickHandler() {
                //this的指向就是当前对象
                this.msg = "wusir";
                this.age = 20;
            },
            clickHandler: function () {
                console.log(this);
            }

        },
        computed: {
            myMsg: function () {
                //业务逻辑

//                    计算属性默认只有getter方法
                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
    })

    console.log(vm);
</script>
</body>
</html>
computed

相关推荐