vue笔记三

灯莘

于 2024-03-23 14:29:44 发布

阅读量317

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js 笔记前端

本文链接：https://blog.youkuaiyun.com/2201_75867247/article/details/136966569

本文介绍了如何在Vue.js中使用自定义过渡效果控制元素动画，包括v-enter、v-leave-to、v-enter-active和v-leave-active的状态设置。还对比了v-if和v-show的使用，以及v-for遍历数组的用法和v-cloak解决模板闪烁问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、自定义两组样式。来控制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不需要带值