[精讚] [會員登入]
1420

vue.js components 多個組件的呈現

vue.js 組件 component

分享此文連結 //n.sfs.tw/10292

分享連結 vue.js components 多個組件的呈現@igogo
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-22 15:15:30 最後編修
2016-11-25 17:32:23 By igogo
 

這是一個利用vue.js 將json data 取回來   並依點擊的事件 讓不同component 顯示不同的內容的範例

 

data.json

  {
    "_id": "58379018146a09705a1dd0eb",
    "guid": "aa2361a6-c49c-46a0-837d-5bfff6924b89",
    "isActive": true,
    "age": 22,
    "car": "gogoro",
    "pet": "cat"
  },
  {
    "_id": "583790181eaefda6f6f74c93",
    "guid": "e694dafa-5f8d-4d95-8d9f-ef5d7f4df589",
    "isActive": false,
    "age": 24,
    "car": "toyota",
    "pet": "doggy"
  },
  {
    "_id": "58379018447bc827cdd99557",
    "guid": "7dbb0102-e8e8-4ec6-8c93-eb747d33eff3",
    "isActive": true,
    "age": 39,
    "car": "kymco",
    "pet": "pig"
  }
]

 

註冊組件 

 Vue.component('car', {
            props: ['message', 'items'],
            template: '<div>{{message}} cars, which are <ul><li v-for="item in items">{{item.car}}</li></ul></div>',
        });

        Vue.component('pet', {
            props: ['message', 'items'],
            template: '<div>{{message}} pets, which are <ul><li v-for="item in items">{{item.pet}}</li></ul></div>',
        });

 

props 裡的message 及items 是由父組件來的

 

父組件

var app = new Vue({
            el: '#app',
            data: {
                currentView: '',
                message: 'My frends have ',
                items: []
            },
            methods: {
                getData: function(currentView) {
                    this.currentView = currentView;
                    this.$http.get('data.json', {
                            params: {
                                ID: 12345
                            }
                        })
                        .then(function(response) {
                            this.items = response.data;

                            console.log(this.items);
                        })
                        .catch(function(error) {
                            console.log(error);
                        });

                }
            }
        });

 

預設的view 是父組件,當使用者按下按鈕後,會因觸發不同的事件產生不同的結果,currentView的值會因此對應到

 <component v-bind:is="currentView" :message="message" :items="items">
            <!-- component changes when vm.currentView changes! -->
  </component>

 

:items="items"  是 v-bind:items="items" 的縮寫  讓字面更為簡潔

 

完整寫法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    <!-- Latest compiled and minified JavaScript -->
    < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin = "anonymous" >
    </script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/vue-resource@1.0.3/dist/vue-resource.min.js"></script>
</head>

<body>
    <div id="app">
        <component v-bind:is="currentView" :message="message" :items="items">
            <!-- component changes when vm.currentView changes! -->
        </component>
        <button @click="getData('car')" class="btn">car</button>
        <button @click="getData('pet')" class="btn">pet</button>
    </div>
    <footer>
      
        <script type="text/javascript">
        Vue.component('car', {
            props: ['message', 'items'],
            template: '<div>{{message}} cars, which are <ul><li v-for="item in items">{{item.car}}</li></ul></div>',
        });

        Vue.component('pet', {
            props: ['message', 'items'],
            template: '<div>{{message}} pets, which are <ul><li v-for="item in items">{{item.pet}}</li></ul></div>',
        });

        var app = new Vue({
            el: '#app',
            data: {
                currentView: '',
                message: 'My frends have ',
                items: []
            },
            methods: {
                getData: function(currentView) {
                    this.currentView = currentView;
                    this.$http.get('data.json', {
                            params: {
                                ID: 12345
                            }
                        })
                        .then(function(response) {
                            this.items = response.data;

                            console.log(this.items);
                        })
                        .catch(function(error) {
                            console.log(error);
                        });

                }
            }
        });
        </script>
    </footer>
</body>

</html>

 

END

你可能感興趣的文章

vue.js component 在parent與child 傳值 component 在parent與child 傳值

[javascript] 將角色物件放到清單中,並依序讀出每個角色的X值 參考在scratch中建立三個角色並且給定值 http://n.sfs.tw/content/index/14716 一

將google試算表當作簡易資料庫,利用Google apps cript 在網頁上操作查詢 將google試算表當作簡易資料庫,利用apps cript 在網頁上操作查詢 若我有一試算表資料 縣市 status

axios vuejs application/x-www-form-urlencoded 送資料 VUE.JS 以 application/x-www-form-urlencoded 送資料

[vue.js] 動態的props 做parent-child components 雙向綁定 vue.js props components camel-case

word題目轉google測驗 word題目轉google測驗

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

tmux 將終端機切割成多個視 窗 tmux, multiple terminal

雲端校務系統與OPENLDAP帳號整合(3) 二 建置更改密碼服務 下載校端更改密碼程式: 連結 檢查是否安裝java 8 #java -version 安裝open

[scratch2] 巢狀迴圈 有兩清單 一數字 一英文 想排出所以可能, 例如1a,1b,1c,2a,2b,2c...3c 利用巢狀迴圈 內圈累加的變

對照mac address 批次更改電腦名稱 讀取mac address 對照表, 還原電腦後,自動更改密碼 'show logged on user Dim

刪除資料夾內的檔案 lambda 一行文 Arrays.stream(new File("/folder/path").