手把手教你VUE从入门到放弃—— 篇十一（vue中的条件渲染 v-if,v-else,v-else-if,v-show与v-if的使用与区别）

原创于 2019-11-29 10:25:21 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #条件渲染 #v-if #v-else #v-else-if #v-show与v-if

v-if,v-else,v-else-if就不多说了，跟你学的其它语言一样用法，这里重点说下

v-if与v-show的区别两者都是若表达式为true则显示，但是表达式为false的时候 v-if会去除当前dom元素，而v-show则会保留只是不显示罢了会变成如右侧样式

测试源码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的样式绑定</title>
    <script src="vue.js"></script>

   <style type="text/css">
           .class111{
               color:red;
           }
   </style>

</head>
<body>
<div id = 'app2'>
       <div v-if="boo1" @click="changeBoo">你好啊1</div>
       <div v-show="boo1" @click="changeBoo">你好啊1</div>
   </div>
   <script>
       var app = new Vue({
           el:'#app2',
           data:{
               boo1:true
               },
       methods:{
           changeBoo:function(){
               this.boo1 = !this.boo1;
           }
       }
       });
   </script>
</body>
</html>