vuejs 資料綁定

資料綁定

1.vue結構 (html所有的代碼需有一個根包裹起來

<div id="app">

)

#html模版
<template>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
</template>
#js業務
<script>
    export default {
        name: 'app',
        data() {
            return {
                msg: 'vue demo',
            }
        }
    }
</script>
#css樣式
<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
    }
</style>
           

2.資料綁定

#js業務邏輯
<script>
    export default {
        name: 'app',
        data() {
            return {
                msg: 'vue demo',//傳回字元
                obj: {          //傳回對象
                    name: '張麻子',
                    age: 35,
                    job: '麻匪'
                },
                //傳回數組
                arr:['一筒','二筒','三筒','四筒'],
            }
        }
    }
</script>
#html資料綁定
<template>
    <div id="app">
        <h3>{{msg}}</h3>
        <br/>
        <h3>{{obj.name}}的個人簡介</h3>
        <ul>
            <li>姓名：{{obj.name}}</li>
            <li>年齡：{{obj.age}}</li>
            <li>職業：{{obj.job}}</li>
        </ul>
        <hr/>
        <h3>{{obj.name}}的手下</h3>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
</template>
           

#js資料
<script>
    export default {
        name: 'app',
        data() {
            return {
                list: [
                    {
                        name: '圖書館',
                        category: [
                            {
                                name: '文學',
                                num: 2800,
                            },
                            {
                                name: '理學',
                                num: 7908,
                            }
                        ]
                    },
                    {
                        name: '天文館',
                        goods: [
                            {
                                good: '望遠鏡A2',
                                caliber: 10,
                            },
                            {
                                good: '望遠鏡L8',
                                caliber: 30,
                            },
                        ]
                    },
                ]
            }
        }
    }
</script>
#html資料綁定
<h3>建築類</h3>
<ul>
    <span v-for="i in list">名稱：{{i.name}}
        <span v-for="j in i.category">
            <li>名稱：{{j.name}}</li>
            <li>數量：{{j.num}}</li>
        </span>
        <span v-for="j in i.goods">
            <li>名稱：{{j.good}}</li>
            <li>數量：{{j.caliber}}cm</li>
        </span>
    </span>
</ul>
           

參考資料

源碼示例