v-if,v-else-if,v-else和v-show

v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的。但是如果v-if的话，如果if的值是false那么元素不会生成

注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突

v-if

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span>{{ message }}</span> <br>
   <p v-if="seen">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    seen:true,
  }
})
</script>
</html>

v-if和v-else

   <a href="#" v-if="islogin">个人中心</a>
   <a href="#" v-else>登录</a>

注意：v-else要放在v-if后面

v-if,v-else-if,v-else

<img src="" alt="皇帝" v-if="level === 1">
<img src="" alt="皇亲" v-else-if="level === 2">
<img src="" alt="国戚" v-else-if="level === 3">
<img src="" alt="大臣" v-else>

v-show

v-show控制元素的display属性，

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <p v-show="seen">你看不见我</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    seen:false
  }
})
</script>
</html>

 

posted @ 2021-04-23 10:58  EF果果  阅读(109)  评论(0)  编辑  收藏  举报