zoukankan      html  css  js  c++  java
  • 七、条件渲染v-if的使用

    1、v-if指令,用于条件性地渲染一块内容

         1> 只有指令的表达式返回true的时候,文档中对应的DOM元素才能被渲染。     

         2> 使用指令v-if='false'的标签,文档真正删去了这个DOM元素

         3> v-if 作三元运算符,返回结果不是boolen类型的话是没有意义的,因为只有指令的表达式返回true的时候,被渲染。

         4> template标签是Vue的模板标签,使用指令v-if='false'后,可以使该标签内的所有内容都从文档上消失。(推荐:tempalte标签和v-if配合使用效果最好,可以作            条件判断或者逻辑判断。)

    2、指令v-if搭配v-else使用,可以做逻辑true/false的判断(基于判断结果再去做业务逻辑)。

          指令v-if搭配v-else-ifv-else使用,可以做多条件逻辑的判断(基于判断结果再去做业务逻辑)。

          注意使用这两个指令的两个标签必须是同类型标签,且必须是同级标签,且是前后顺序使用

    3、v-if 加 key 值的作用:

           1> Vue在渲染元素时,会尽可能地复用已有的元素而非重新渲染,这么做会使Vue渲染效率变得非常高。

           2> 但是在开发中会出现我们不想要的结果。

                比如:在输入框中,输入一下内容,单击按钮切换,会发现之前输入的内容被保留了下来。

           3> 用key就可以解决这个问题。

    <template>
        <div v-if="loginType=='1'">  
            手机号:<input type="text" placeholder="请输入手机号" key="1">    <!--8、搭配key使用,可以重新渲染dom元素,清除dom元素的原有内容-->
        </div>
        <div v-else>  
            E-mail:<input type="text" placeholder="请输入E-mail" key="2">  <!--注意,key的值必须是Number或者String,且必须是值唯一不能重复。-->
        </div>
        <button type="button" v-on:click="loginType=( loginType=='1'?'2':'1' )">切换登录模式</button>
    </template>
    <script>
        let data={
             loginType:'1'
        }; 
    </script>

       

  • 相关阅读:
    Maven仓库是什么
    什么是Maven
    Shiro 的优点
    shiro有哪些组件
    Python偶斐波那契数
    Python求1000以内所有3或5的倍数的和。
    python"TypeError: 'NoneType' object is not iterable"错误解析
    python中列表常用的几个操作函数
    反射类的一些基本用法
    循环随机数短时间内大多都是重复的问题
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/15235614.html
Copyright © 2011-2022 走看看