마카로닉스

1780 No

Vue.js 3 정렬과 suffle(순서 바꾸기)

2021-11-12 03:25:00 By 라이트 0 258 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
    
</head>
<body>

<a href="https://jsonplaceholder.typicode.com/" target="_blank">json 데이터 샘플</a><br><br>

    <div id="app">
        <div v-for="item in dataArray" :key="item.title">
            <my-product  v-bind:object="item" />
        </div>

        <button @click="sortData">소트</button>
        <button @click="shuffleData">셔플</button>
    </div>



<script>
    const Mycomponent={
        props:['object'],
        template:`
                <div>
                <p style="background-color: blanchedalmond;">{{object.title}}</p>
                <p>해설 :{{object.body}}</p>
            </div>
        `
    };

    const app = {
        data() {
            return {
                dataArray:[
                {title:'BBB', body:'bbb'},
                {title:'CCC', body:'ccc'},
                {title:'AAA', body:'aaa'}
                  
                ]
            }
        },
        components: {
            'my-product':Mycomponent
        },
    

        methods: {
            sortData(){
                this.dataArray.sort(function(a, b){
                    return (a.title<b.title?-1:1);
                    return 0;
                });

            },
            shuffleData(){
                let buffer=[];
                const len =this.dataArray.length;
                for(let i=len; i>0; i--){
                    console.log(i);
                    const r=Math.floor(Math.random() * i);
                    buffer.push(this.dataArray[r]);

                    this.dataArray.splice(r, 1);
                }
                this.dataArray=buffer;
            }

        },
    }
    Vue.createApp(app).mount('#app');  
    
   

</script>

</body>
</html>