1、v-enter 【时间点进入之前】 元素的起始状态,此时还没有开始进入。
2、v-leave-to [这是一个时间点】是动画离开之后,离开的终止状态,此时元素动画已经结束。
示例:
.v-enter, v-leave-to {
opacity: 0;
transform: translateX(800px);
}
3、v-enter-active入场时段
4、v-leave-active出场时段
.v-enter-active,
.v-leave-active {
transition: all 0.4s ease;
}
二、点击按钮,显示,再点击,隐藏
示例:
<div id="app">
<input type="button" value="戳我进入" @click="flag=!flag">
<transition>
<!--需求:点击按钮,让p显示,再点击,让p隐藏-->
<p v-if="flag">{{msg}}</p>
</transition>
</div>
<script src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hellfo vue.js.',
flag: false
}
});
</script>
四、 v-for用于遍历数组,对象,字符串,指定次数
注::key=“需要唯一”
示例:
<h1 v-for="(item,index) of objs" :key="index">
{{item}}--------{{index}}
</h1>
五、v-cloak 解决网速慢展示插值|页面出现闪烁或白屏, 使用需要给标签添加v-cloak
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app" style="height: 2000px;">
<h1 v-cloak>{{x}}</h1>
</div>