vue中v-if和v-show条件为false时的区别

vue中v-if和v-show 条件为false时的区别v-if中条件为false时，标签不存在，v-show中条件为false时，标签是默认隐藏样式。原地址：https://www.cnblogs.com/rik28/p/6024425.htmlv-if:例子：<body><div id="app"><h1

weixin_44563660

6157人浏览 · 2019-03-08 15:02:44

weixin_44563660 · 2019-03-08 15:02:44 发布

vue中v-if和v-show 条件为false时的区别
v-if中条件为false时，标签不存在，v-show中条件为false时，标签是默认隐藏样式。
原地址：https://www.cnblogs.com/rik28/p/6024425.html
v-if:
例子：

 <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 24,
                name: 'keepfool'
            }
        })
    </script>

结果：

在这里插入图片描述
v-show：
例子：

<body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 24,
                name: 'keepfool'
            }
        })
    </script>

结果：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^