Vue.js教程（三）：v-if条件判断

v-if是继v-bind之后的又一个v-xxx系列前言v-if这是我们学习Vue中的的第二个v-xxx系列。学到这里，不得不提一下的是，所有v-bind或者v-if所关联的都是Vue的动态变量，是变量！是变量！是变量！v-if基本使用&lt;!DOCTYPE html&gt;&lt;html lang="en"&a

杨景文Blog

47771人浏览 · 2018-11-15 16:21:11

杨景文Blog · 2018-11-15 16:21:11 发布

v-if是继v-bind之后的又一个v-xxx系列

前言

v-if这是我们学习Vue中的的第二个v-xxx系列。学到这里，不得不提一下的是，所有v-bind或者v-if所关联的都是Vue的动态变量，是变量！是变量！是变量！

v-if基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件循环</title>
    <!--第一步：导入vue.js的引用-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--第二步：使用v-if进行条件判断，条件为true则显示此标签，false则不现实-->
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>

<!--第三步：激活vue，给动态属性复制-->
<script type="text/javascript">
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    })
</script>
</body>
</html>

如上代码所示，即为v-if的使用,seen是vue定义的一个变量。注意：v-if的变量值一般都是true或者false。效果有点像是显示（true）/隐藏（false）。

学习前端最好的方式就是动手用一用，效果出来了就明白了。

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}$/, //不连续的两位字母// /^