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

196 阅读 0 评论 130 点赞

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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>