vuejs 数据绑定

关注

原创最新推荐文章于 2026-09-07 09:39:26 发布 293 阅读 AI 写同款· GEO 优化 ›

数据绑定

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>