1.6 v-if v-show

一、v-if

1. 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let和var的块级作用于</title>
</head>
<body>

<div id = "first">
    <!--1. v-if单独使用
                     1.1 isShow当做变量来看-->
    <h2 v-if="true">{{name}}</h2>
    <h2 v-if="false">{{address}}</h2>
    <h2 v-if="isShow">{{address}}</h2>

    <!--2. v-if 和 v-else 结合使用
                   2.1 v-else只针对最近的v-if生效-->
    <h2 v-if="isShow">{{name}} ---</h2>
    <h2 v-else>{{address}} ---</h2>

    <!-- 3. v-if, v-else-if, else 结合使用
                  3.1 一般不建议这种复杂逻辑写在html中,通过函数或者计算属性替代-->
    <h2 v-if="score>90">优秀</h2>
    <h2 v-else-if="score>75">良好</h2>
    <h2 v-else-if="score>60">及格</h2>
    <h2 v-else>不及格</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   let module = new Vue({
       el: '#first',
       data:{
           name: '舒展',
           address:'陕西',
           isShow: true,
           score:99,
       },
   })
</script>
</body>
</html>

2. 登录切换案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let和var的块级作用于</title>
</head>
<body>

<div id = "first">
    <!-- 1. v-else 跟随最近的 v-if生效的
            1.1 切换后,用户输入的信息不回被清空-->
    <span v-if="logWithPhone">
        用户手机号<input type="text" placeholder="请输入手机号码"><br>
    </span>

    <span v-else>
        用户邮箱<input type="text" placeholder="请输入邮箱"><br>
    </span>
    <button @click="logWithPhone=!logWithPhone">切换登录方式</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   let module = new Vue({
       el: '#first',
       data:{
           logWithPhone:true,
       },
   })
</script>
</body>
</html>

3. 登录切换问题-组件复用问题

  • Vue在解析页面元素时候,会先去创建一个虚拟的DOM;
  • 发现了两个互斥的,可以复用的两个input组件,所以只会创建一个input;
  • 导致问题:切换后,用户在页面输入的东西不会清除;
  • 解决方法:在每个input组件中加上唯一的key即可解决;
 <span v-if="logWithPhone">
        用户手机号<input type="text" placeholder="请输入手机号码" key="phone"><br>
</span>

二、v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let和var的块级作用于</title>
</head>
<body>

<div id = "first">
    <!-- 1. v-show 类似于v-if,决定是否渲染 
                 1.1 v-if:如果为false,则直接将该组件在DOM中删除掉
                 1.2 v-show: 如果为false,不会删除该组件,只是把他设定为了 display:none
                 1.3 如果切换次数少,则选择v-if;
                 1.4 如果频繁切换,则选择v-show-->
   <h2 v-if="isShow">舒展</h2>
    <h2 v-show="isShow">舒展</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   let module = new Vue({
       el: '#first',
       data:{
           isShow:true,
       },
   })
</script>
</body>
</html>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页