[精讚] [會員登入]
1341

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 傳值

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

vue.js components 多個組件的呈現 vue.js 組件 component

[vue.js] input event Form-Input-Components-using-Custom-Events

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

題庫批次匯入google表單 請先建一新試算表, 將題目轉成格式如下 並將網址列記下來, 後續的題目就是從此試算表讀出 題目 答案 選項一 選項二 選

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

vim 特定範圍行數開頭加上# 註解 vim 特定範圍行數開頭加上# 註解

找尋多個文件夾中最新檔案(jpg,png,txt)並複製到nexus資料夾 找尋多個文件夾中最新檔案(jpg,png,txt)並複製到集中資料夾

Arrays.asList 後想再add出現 UnsupportedOperationException 這個問題真是搞死我了 List<String> fruits = Arrays.asList("a

ArrayList 與 HashMap 範例 public static void main(String[] args) { String titleIds = &

在docker裡跑spring boot+mongo(二) 使用docker-compose 管理多個container 前篇使用docker run 一次建一個container