vuejs 数据绑定

Posted 2022-05-29 ghostxbh

数据绑定

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.calibercm</li>
        </span>
    </span>
</ul>

参考资料

数据绑定

源码示例

github