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