Vue指令之V-if篇

最新推荐文章于 2024-09-02 02:42:36 发布

雪子

最新推荐文章于 2024-09-02 02:42:36 发布

阅读量2.9k

点赞数

分类专栏： Vue 文章标签： Vue 前端

本文链接：https://blog.csdn.net/Kermit_father/article/details/82722401

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-if见名知意，就和我们在java中的if功能类似

java中if（条件成立） {执行语句};只不过Vue中将java中的执行语句换成了标签快中的内容

在v-if中，也是类似的 v-if="条件"，如果条件为真，就执行标签快中的内容

废话不多说，直接上代码：

<html>
<head>
<meta charset="utf-8">
<title>Vue指令之v-if</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 
</head>
<body>
<div id="app">
    <p v-if="10>2">条件成立，快快输出！</p>         //10大于2 条件成立 会输出
    <p v-if="10>100">条件不成立,不输出哦！</p>    //10不大于100 条件不成立 不会输出
    <template v-if="ok">                                          //ok 对应Vue的data中定义的OK
      <h1>你铭记的不是纯的风景！</h1>
      <p>而是站在</p>
        <p>风景里抵死不认的人</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',   //作用域为ID为app的div
  data: {
    ok: true    //Vue定义变量及赋值
  }
})
</script>
</body>
</html>

输出：