zoukankan      html  css  js  c++  java
  • v-if、v-show 指令

    HTML部分:

    1 <div id="app">
    2     <button type="button" @click="flag=!flag">显示/隐藏</button>
    3 
    4     <p v-if="flag">v-if的内容</p>
    5     <p v-show="flag">v-show的内容</p>
    6 </div>

    JS部分:

    1 var app = new Vue({
    2     el: "#app",
    3     data() {
    4         return {
    5             flag: true,
    6         }
    7     },
    8 });

    显示结果:

    当点击  显示/隐藏  按钮后:

     有图发现,根据Elements可见,v-show所在的p标签只是切换了display:none;的样式,而v-if所控制得标签,则被删除了。

    总结:

    1.  v-if 的特点:每次都会更新删除或创建元素 
    2.  v-for 的特点:每次不会更新进行DOM的删除和创建操作,只是切换了元素的display:none样式 
    3. v-if 有较高的切换性能 
    4.  v-show 有较高的初始渲染消耗 
    5. 如果元素涉及到频繁的切换,最好不要使用v-if,推荐使用v-show 
    6.  如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if 
  • 相关阅读:
    将图片插入到excel中
    C#如何实现下载文件保存到本地上面去
    jQuery实现按enter键登录
    线程(转载)
    SQL Server:触发器详解
    C# 创建Windows服务
    小记
    mysql的部署和使用
    Maven的理解和使用
    tomcat的部署与实践
  • 原文地址:https://www.cnblogs.com/chenzongyan/p/10260766.html
Copyright © 2011-2022 走看看