Vue.javascript源码分析(二十三)指令篇v-show指令详解

不是因为生活太现实,而对生活失望;而是知道生活太现实,所以更要用心的活下去。给自己一个拥抱。

v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="d"><p v-show="isShow">Hello Vue!</p></div> 
    <script>
        Vue.config.productionTip=false;
        Vue.config.devtools=false;
        var app = new Vue({el:'#d',data:{isShow:true}})
    </script>
</body>
</html>

到此这篇关于Vue.javascript源码分析(二十三)指令篇v-show指令详解就介绍到这了。热情和欲望可以突破一切难关。更多相关Vue.javascript源码分析(二十三)指令篇v-show指令详解内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

标签: Vue