Vue指令之V-if篇

时间:2024-04-09 12:17:07

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>

输出:

Vue指令之V-if篇

v-if是不是so easy !!!相信天才的你已经完全掌握!!!

原创不易,转载注明出处:https://blog.csdn.net/Kermit_father