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

编程入门 行业动态 更新时间:2024-10-26 17:33:46

速进!!!<a href=https://www.elefans.com/category/jswz/34/1761605.html style=教你用vue写轮播图"/>

速进!!!教你用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><script src=".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">

更多推荐

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

本文发布于:2024-02-12 00:09:13,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1684500.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:教你用   速进   写轮播图   vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!