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會渲染但根據條件決定是否展示