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

时间：2021-02-06 10:37:27 收藏：0 阅读：31

基础数据绑定

变量赋值：

<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会渲染但根据条件决定是否展示

原文：https://www.cnblogs.com/ckfuture/p/14380635.html