首页 > 其他 > 详细

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

时间:2018-05-22 00:31:16      阅读:207      评论:0      收藏:0      [点我收藏+]

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  自动写入>

 

 

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

原文:https://www.cnblogs.com/xfym888/p/9070047.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!