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>

3.復雜數組

#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>

參考資料

數據綁定

源碼示例

github


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM