كود عمل سليدر من خلال vuejs

كود عمل سليدر من خلال vuejs

تم طرح درس كيفية تصميم سليدر يعمل من خلال
vuejs وهذا هو الكود الخاص بالدرس

<!DOCTYPE html>
<html>
    <head>
        <title>5dmat-web.com</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
<body>

<div id="app" class="container">
    <br>
    <p>
        <img v-bind:src="imageActive" width="600" height="300">
    </p>
    <a href="" @click.prevent="chnageimage(0)" class="btn btn-info">1</a>
    <a href="" @click.prevent="chnageimage(1)" class="btn btn-info">2</a>
    <a href="" @click.prevent="chnageimage(2)" class="btn btn-info">3</a>
    <a href="" @click.prevent="chnageimage(3)" class="btn btn-info">4</a>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            images:[
                "coverthis.jpg",
                "cover2.jpg",
                "abdelAziz.jpg",
                "995016_ebf4.jpg"
            ],
            imageActive:"coverthis.jpg"
        },
        methods:{
            chnageimage:function(index){
                this.imageActive = this.images[index];
            }
        }
    });
</script>

</body>
</html>

0 التعليقات


    لا يوجد تعليقات حتي الان

اضف تعليق


يجب ان يكون لديك حساب في الموقع تسجيل الدخول او تسجيل عضوية جديدة

خدمات ويب الفريق