5-21 vue (if ,动画,循环)

Posted 2020-11-07 xfym888

01  .if判断

   在标签内增加 v-if 来判断当前标签是否显示

   例如: <p   v-if=‘布尔变量‘> 测试</p>

           在vue对象描述中对应设置: var vm=new Vue({ data{布尔变量:true }})   //变量设置好后就可以通过其他操作随时修改

 

02 动画

   所有标签可以加载<transition> </transition>标签来进行vue动画绑定,(这只是方法之一,更多方法查vue手册)

  例子:一个标签淡出隐藏的动画

      body中:   <transition name = ‘动画方案1‘>

                      <p >测试</p>

                   </transition> 

       css中:

<style type="text/css">

        .fade-enter-active, .fade-leave-active { 动画开始

        transition: opacity .5s    //动画的属性和时长

      }

      .fade-enter, .fade-leave-active {  动画结束

        opacity: 0    //动画目标值

      }

</style>

 

        <附加小技巧:subline中动画css的兼容性一次输入,可以使用  trsf  自动写入>