一、自定义两组样式。来控制transition内部的元素实例动画。
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>
六、v-if和v-show区别:
1.相同的:都可以进行显示隐藏
2.不同点:v-if存在或不存在,v-show展示或不展示
3.优缺点:少次的显示隐藏推荐使用v-if,减少内存的消耗多次的显示隐藏推荐使用v-show。
七、v-if和v-for优先级和使用事项:
在vue2中v-for比v-if优先级高
在vue3中v-if比v-for优先级高
v-if和v-for在vue2或vue3中都不要同时使用,
如果需要使用在外层先使用判断,在进行循环
八、v-else,v-else-if
注:v-else,v-else-if不能单独使用,要跟if一起使用
示例:
<h2 v-else-if="x==2">我是测试文本222</h2>
<h2 v-else>我是测试文本333</h2>
v-else,v-cloak,v-once,v-pre不需要带值