vue中v-show v-if v-bind的使用

78 阅读 0 评论 52 点赞

我是靠谱客的博主从容鸭子，最近开发中收集的这篇文章主要介绍vue中v-show v-if v-bind的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

v-show：用于控制页面的标签元素是否展示，底层通过控制元素的display属性来进行标签的显示与隐藏控制
v-if：同样用于控制页面中的标签元素是否展示，底层通过对dom树节点进行添加和删除来控制显示与隐藏控制，效率要低于v-show
v-bind：用于给页面中的标签属性绑定相应的属性

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="num">
        <p v-show="isShow">{{number}}</p>
        <p v-if="isShow">{{number}}</p>
        <input type="button"  v-bind:value="msg" @click="hideOrShow">

    </div>
<script>
    const num = new Vue({
        el:"#num",
        data:{
            number:0,
            msg:"点击隐藏",
            isShow:true
        },
        methods:{
            hideOrShow:function(){
                if(this.isShow) {
                    this.msg="点击显示";
                }else {
                    this.msg="点击隐藏";
                }
                this.isShow = !this.isShow;
            }
        }
    });
</script>
</body>
</html>