• Vue——条件判断、循环遍历


    一、条件判断

    1. v-if、v-else、v-elseif

    v-if用于条件判断,判断Dom元素是否显示。

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Documenttitle>
    8. head>
    9. <body>
    10. <div id="app">
    11. <h2 v-if="isFlag">isFlag为true显示这个h2>
    12. <h2 v-show="isShow">isShow为true是显示这个h2>
    13. <div v-if="age<18">小于18岁未成年div>
    14. <div v-else-if="age<60">大于18岁小于60岁正值壮年div>
    15. <div v-else="">大于60岁,暮年div>
    16. div>
    17. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    18. <script>
    19. const app = new Vue({
    20. el:"#app",
    21. data:{
    22. isFlag:true,
    23. isShow:false,
    24. age:66
    25. }
    26. })
    27. script>
    28. body>
    29. html>

    (1)单独使用v-if,变量为布尔值,为true才渲染Dom

    (2)v-show的变量也是布尔值,为true才显示内容,类似css的display

    (3)v-if、v-else、v-else-if联合使用相当于if、elseif、else,但是在条件比较多的时候建议使用计算属性。

     2. v-if的demo

    ​ 在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Documenttitle>
    8. head>
    9. <body>
    10. <div id="app">
    11. <span v-if="isUser">
    12. <label for="username">用户账号label>
    13. <input type="text" id="username" placeholder="请输入用户名" >
    14. span>
    15. <span v-else="isUser">
    16. <label for="email">用户邮箱label>
    17. <input type="text" id="email" placeholder="请输入用户邮箱" >
    18. span>
    19. <button @click="isUser=!isUser">切换类型button>
    20. div>
    21. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    22. <script>
    23. const app = new Vue({
    24. el:"#app",
    25. data:{
    26. isUser:true
    27. }
    28. })
    29. script>
    30. body>
    31. html>

    ​ 使用v-ifv-else选择渲染指定的Dom,点击按钮对isUser变量取反。

    这里有个小问题,如果已经输入了账号了,此时想切换到邮箱输入,输入框未自己清空。

    ​ 这里需要了解一下vue底层操作,此时input输入框值被复用了。

    (1)vue在进行DOM渲染是,处于性能考虑,会复用已经存在的元素,而不是每次都创建新的DOM元素。

    (2)在上面demo中,Vue内部发现原来的input元素不再使用,所以直接将其映射对应虚拟DOM,用来复用。

    (3)如果不希望出现类似复用问题,可以给对应的dom元素加上key值,并保证key不同。

    1. <input type="text" id="username" placeholder="请输入用户名" key="username">
    2. <input type="text" id="email" placeholder="请输入用户邮箱" key="email">

    3. v-show

    ​ v-if 在首次渲染的时候,如果条件为假,什么也不操作,页面当作没有这些元素。当条件为真的时候,开始局部编译,动态的向DOM元素里面添加元素。当条件从真变为假的时候,开始局部编译,卸载这些元素,也就是删除。

    ​ v-show 不管条件是真还是假,第一次渲染的时候都会编译出来,也就是标签都会添加到DOM中。之后切换的时候,通过display: none;样式来显示隐藏元素。可以说只是改变css的样式,几乎不会影响什么性能。

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Documenttitle>
    8. head>
    9. <body>
    10. <div id="app">
    11. <h2 v-show="isFlag">v-show只是操作元素的style属性displayh2>
    12. <h2 v-if="isFlag">v-if是新增和删除dom元素h2>
    13. div>
    14. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    15. <script>
    16. const app = new Vue({
    17. el:"#app",
    18. data:{
    19. isFlag:true
    20. }
    21. })
    22. script>
    23. body>
    24. html>

    二、循环遍历

    1. v-for遍历数组

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Documenttitle>
    8. head>
    9. <body>
    10. <div id="app">
    11. <ul>
    12. <li v-for="item in names" >{{item}}li>
    13. ul>
    14. <ul>
    15. <li v-for="(item,index) in names" >{{index+":"+item}}li>
    16. ul>
    17. div>
    18. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    19. <script>
    20. const app = new Vue({
    21. el:"#app",
    22. data:{
    23. names:["zzz","ttt","yyy"]
    24. }
    25. })
    26. script>
    27. body>
    28. html>

     一般需要使用索引值。

  • {{index+":"+item}}
  • index表示索引,item表示当前遍历的元素。

    2. v-for遍历对象

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Documenttitle>
    8. head>
    9. <body>
    10. <div id="app">
    11. <ul>
    12. <li v-for="(item,key) in user" >{{key+"-"+item}}li>
    13. ul>
    14. <ul>
    15. <li v-for="(item,key,index) in user" >{{key+"-"+item+"-"+index}}li>
    16. ul>
    17. div>
    18. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    19. <script>
    20. const app = new Vue({
    21. el:"#app",
    22. data:{
    23. user:{
    24. name:"zzz",
    25. height:188,
    26. age:24
    27. }
    28. }
    29. })
    30. script>
    31. body>
    32. html>
    1. 遍历过程没有使用index索引,
    2. {{key+"-"+item}}
    3. ,item表示当前元素是属性值,key表示user对象属性名。
    4. 遍历过程使用index索引,index表示索引从0开始。

  • 相关阅读:
    数据分析可视化之模型介绍
    连接Mumu模拟器使用ADB
    电视盒子/投影仪是怎么看电视的?安利两款软件教程教会你
    Scala第十九章节
    算法通关村第18关【青铜】| 回溯
    安卓文件资源中,一个字串包含引用其他字串的写法
    mysql基础(4)
    Chrome扩展的核心:manifest 文件(上)
    一次cpu 跌底排查
    Parasoft Jtest 2023.1
  • 原文地址:https://blog.csdn.net/m0_46461853/article/details/126124746