速进！！！教你用vue写轮播图

最新推荐文章于 2024-04-30 16:42:28 发布

galaxy222111

最新推荐文章于 2024-04-30 16:42:28 发布

阅读量593

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/galaxy222111/article/details/106523149

版权

首先了解一下v-show和v-if的区别

  <div id="app">
        <h1 v-show="true">666</h1>
        <h1 v-if='true'>777</h1>
        <h1 v-show="false">666</h1>
        <h1 v-if='false'>777</h1>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        new Vue({
   
            el: '#app',
            data() {
   
                return {
   

                }
            },
            methods: {
   

            },
        })

然后我们打开控制台
在这里插入图片描述
可以看到v-show和v-if都为false的时候标签内容都是看不见的，只不过方式不同，v-show是将标签的dispaly属性设置为none，而v-if直接将标签销毁了，销毁标签比较消耗性能，因此v-if适合只执行一次的语句，如果频繁调用则会导致浏览器卡顿

接下来我们用v-show来做轮播图
直接上代码了，注释写在代码上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

galaxy222111

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
速进！！！教你用vue写轮播图

首先了解一下v-show和v-if的区别 <div id="app"> <h1 v-show="true">666</h1> <h1 v-if='true'>777</h1> <h1 v-show="false">666</h1> <h1 v-if='false'>777</h1> </div> <s
复制链接

扫一扫