二十四、Vue动画的基础使用
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
单元素/组件过度
Vue 提供了 transition
的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用
v-if
) - 条件展示 (使用
v-show
) - 动态组件
- 组件根节点
vue提供了6个过渡类名
1、v-enter
定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
2、v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
3、v-enter-to
定义进入过渡的结束状态。
4、v-leave
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
5、v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
6、v-leave-to
:定义离开过渡的结束状态。
<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.fade-enter-active</span>, <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.fade-leave-active</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">transition</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">opacity</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">.5s</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.fade-enter</span>, <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.fade-leave-to</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">opacity</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">0</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-on:click</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"isShow = !isShow"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>切换<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">transition</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">name</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"fade"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">p</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-if</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"isShow"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>hello<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">transition</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">isShow</span>:<span style="box-sizing: border-box;color: rgb(247, 118, 105)">true</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>
CSS过渡
<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.slide-fade-enter-active</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">transition</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">all</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">.3s</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">ease</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.slide-fade-leave-active</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">transition</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">all</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">.8s</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">cubic-bezier</span>(<span style="box-sizing: border-box;color: rgb(247, 118, 105)">1.0</span>, <span style="box-sizing: border-box;color: rgb(247, 118, 105)">0.5</span>, <span style="box-sizing: border-box;color: rgb(247, 118, 105)">0.8</span>, <span style="box-sizing: border-box;color: rgb(247, 118, 105)">1.0</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.slide-fade-enter</span>, <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.slide-fade-leave-to</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">transform</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">translateX</span>(<span style="box-sizing: border-box;color: rgb(247, 118, 105)">10px</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">opacity</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">0</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-on:click</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"isShow = !isShow"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>切换<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">transition</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">name</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"slide-fade"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">p</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-if</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"isShow"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>hello<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">transition</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">isShow</span>:<span style="box-sizing: border-box;color: rgb(247, 118, 105)">true</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>
css动画
CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter
类名在节点插入 DOM 后不会立即删除,而是在 animationend
事件触发时删除。
<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.bounce-enter-active</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">animation</span>: <span style="box-sizing: border-box;color: rgb(130, 177, 255)">bounce-in</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">.5s</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(222, 203, 107)">.bounce-leave-active</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">animation</span>: <span style="box-sizing: border-box;color: rgb(130, 177, 255)">bounce-in</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">.5s</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">reverse</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box">@keyframes</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">bounce-in</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">0%</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">transform</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">scale</span>(<span style="box-sizing: border-box;color: rgb(247, 118, 105)">0</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">50%</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">transform</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">scale</span>(<span style="box-sizing: border-box;color: rgb(247, 118, 105)">1.5</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">100%</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">transform</span>: <span style="box-sizing: border-box;color: rgb(247, 118, 105)">scale</span>(<span style="box-sizing: border-box;color: rgb(247, 118, 105)">1</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-on:click</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"isShow = !isShow"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>切换<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">transition</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">name</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"bounce"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">p</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-if</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"isShow"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>hello<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">transition</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">isShow</span>:<span style="box-sizing: border-box;color: rgb(247, 118, 105)">true</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>
注:本篇案例完全来自于官方文档
我是小白,期待和优秀的你一起同行!
小白
2020年12月05日
请登录后再评论