uni-app 模板语法及数据绑定

基础数据绑定

  • 变量赋值:
<template>
    <view>
        {{title}}
    </view>
</template>

<script>
    export default{
        data(){
            return{//生命变量
                title: ‘关于‘,
                age:18
            }
        }
    }
</script>

<style>
</style>
  • 变量传递:
<template>
    <view>
        {{title}}---{{age}}
    </view>
</template>

<script>
    var _self;
    export default{
        data(){
            return{//生命变量
                title: ‘关于‘,
                age:18
            }
        },
        onLoad() {
            _self=this;//变量传递
            setTimeout(function(){
                _self.age=20;
            },3000);
        }
    }
</script>

<style>
</style>
  • 数组形式的数据绑定:
    <template>
        <!-- 循环遍历数组 -->
        <view v-for="(item,index) in students">
            {{index}}--{{item.name}}:{{item.age}}
        </view>
    </template>
    
    <script>
        var _self;
        export default{
            data(){
                return{//申明数组
                    students:[
                        {name:"张三",age:18},
                        {name:"李四",age:20}
                    ]
                }
            }
        }
    </script>
    <style>
    </style>
  • 条件渲染
<template>
    <view>
        <!-- 循环遍历数组 -->
        <view v-if="isShow">
            显示了
        </view>
    </view>

</template>

<script>
    var _self;
    export default{
        data(){
            return{//将isShow改成false 就不显示了
                isShow: true
            }
        }
    }
</script>

<style>
</style>
  • 使用hidden
    <template>
        <view>
            <!-- 循环遍历数组 -->
            <view :hidden="isShow">
                摊牌了
            </view>
        </view>
    
    </template>
    
    <script>
        var _self;
        export default{
            data(){
                return{//将isShow改成false 就不隐藏了
                    isShow: false
                }
            }
        }
    </script>
    
    <style>
    </style>

if和hidden的区别

if会根据条件决定是否渲染,hidden会渲染但根据条件决定是否展示

 

uni-app 模板语法及数据绑定

上一篇:spring依赖注入失效或不成功的一种情况和解决办法


下一篇:《卸甲笔记》-Oracle线下迁移到PPAS