관리 메뉴

moozi

vuejsAjax01.html 본문

TIS_2020/응용SW2020_1기

vuejsAjax01.html

moozi 2020. 5. 15. 15:43

<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="UTF-8">

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

    <title>webpos-do</title>

 

  </head>

  <body>

   <div id='app'>

    <div v-for='product in products'>

        <h3>{{ product.name }}</h3>

        <p>{{ product.price }}</p>

        

    </div>

    </div>

    <script src="https://unpkg.com/vue"></script>

    <script>

     new Vue({

        el: '#app',

        data: {

            products: []

        },

        created() {

            fetch('http://pjs.dothome.co.kr/ajaxDB2.php')

                .then((response=> {

                    if(response.ok) {

                        return response.json();

                    }

                

                    throw new Error('Network response was not ok');

                })

                .then((json=> {

                    this.products=json;

                })

                .catch((error=> {

                    console.log(error);

                });

        }

    });

    </script>

  </body>

</html>

 

'TIS_2020 > 응용SW2020_1기' 카테고리의 다른 글

5/27 board.zip  (0) 2020.05.27
5/22 member2  (0) 2020.05.22
vuejsAjax.zip  (0) 2020.05.12
vuejsAjax04 with jQuery $.ajax()  (0) 2020.05.12
vuejsAjax03.html  (0) 2020.05.12
Comments