Vue——10——v-if和v-show

    技术2022-07-12  75

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../lib/vue.js"></script> </head> <body> <!-- v-if的特点:每次都会重新删除或创建元素 有较高的切换性能消耗--> <!-- v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式 有较高的初始渲染消耗 --> <!-- 如果元素涉及到频繁的切换,最好不要使用v-if --> <!-- 如果元素可能永远也不会被显示出来给用户看到,比如flag为false时,还是创建了v-show只是没有显示出来,这就有了较高的初始性能效能,这个时候推荐使用v-if --> <div id="app"> <!-- 这里flag不用this,因为直接去vm里面找flag的值了 --> <input type="button" value="toggle" @click="flag=!flag"> <h4 v-if="flag">我是一个h4标签</h4> <h6 v-show="flag">我是一个h6标签</h6> </div> <script> var vm = new Vue({ el: "#app", data: { flag: true, }, methods: { } }) </script> </body> </html>
    Processed: 0.042, SQL: 12