经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解
来源：jb51　　时间：2022/8/3 13:18:30　　对本文有异议

一、判断语句

v-if、v-else、v-else-if

v-if是判断是否将DOM元素显示出来

不满足条件的元素，会直接删除，不会存在浏览器上面

v-show

也是用来判断，是否将DOM元素在页面上显示，但是与v-if有着区别，它的不显示是通过display:none;实现的，还是存在浏览上。

  1.    <div id="app">
  2.         <h2 v-if="age<18">未成年</h2>
  3.         <h2 v-else-if="age<60">壮年</h2>
  4.         <h2 v-else>老年</h2>
  5.         <h2 v-show="flag">show</h2>
  6.         <h2 v-if="flag">if</h2>
  7.     </div>
  8.    
  9.     <script src="./vue.js"></script>
  10.     <script>
  11.         let vm = new Vue({
  12.             el:"#app",
  13.             data(){
  14.                 return{
  15.                     age:71,
  16.                     flag:false//true会显示，false不会显示 
  17.                 }
  18.             }
  19.         })
  20.     </script>

如下图片显示，不存在时v-if和v-show的显示状态

可以发现show是被display:none;影藏起来了

if已经从这个世界上消失了

案例

这里用简单的if判断，可以通过按钮控制不同的输入模式

这里也会出现一个细节上的问题，因为Vue会出现大量的复用情况，所以这里需要在input表单中设置一个key值，使其出现差别，在以输入内容的表单，切换后内容会也会被取消掉。

  1.    <div id="app">
  2.         <span v-if="usname">
  3.             <label for="uname">用户名</label>
  4.             <input type="text" id="username" placeholder="输入用户名" key="index">
  5.         </span>
  6.         <span v-else="usname">
  7.             <label for="email">用户名邮箱</label>
  8.             <input type="text" id="email" placeholder="输入邮箱" key="index1">
  9.         </span>
  10.         <button @click="usname=!usname">选择</button>
  11.     </div>
  12.     <script src="./vue.js"></script>
  13.     <script>
  14.         let vm = new Vue({
  15.             el:"#app",
  16.             data(){
  17.                 return{
  18.                     usname:true
  19.                 }
  20.             }
  21.         })
  22.     </script>

二、循环语句

如下案例

遍历数组

是通过循环来实现点击变色，这里遍历出了下标和内容，在页面上显示出来

v-for="(item,index) in list"

item值index索引

  1.     <style>
  2.         .active{
  3.             color: red;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <ul>
  10.             <li :class="currentIndex==index?'active':''" @click="change(index)" v-for="(item,index) in list">{{index}}--{{item}}</li>
  11.         </ul>
  12.     </div>
  13.     <script src="./vue.js"></script>
  14.     <script>
  15.         let vm = new Vue({
  16.             el:'#app',
  17.             data(){
  18.                 return {
  19.                     currentIndex:0,
  20.                     list:["海王","海贼王","火影忍者","复仇者联盟"],
  21.                 }
  22.             },
  23.             methods:{
  24.                 change(index){
  25.                     this.currentIndex=index
  26.                 }
  27.             }
  28.         })
  29.     </script>
  30. </body>

遍历对象

  1. <!DOCTYPE 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>Document</title>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.     <!-- 1.遍历过程没有使用index索引-->
  12.     <!-- 格式为：(value, name) -->
  13.     <ul>
  14.       <li v-for="(item,key) in user" >{{key+"-"+item}}</li>
  15.     </ul>
  16.     <!-- 格式为：(value, name, index) -->
  17.     <ul>
  18.       <li v-for="(item,key,index) in user" >{{key+"-"+item+"-"+index}}</li>
  19.     </ul>
  20.  
  21.   </div>
  22.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  23.   <script>
  24.     const app = new Vue({
  25.       el:"#app",
  26.       data:{
  27.         user:{
  28.           name:"zzz",
  29.           height:188,
  30.           age:24
  31.         }
  32.       }
  33.     })
  34.   </script>
  35. </body>
  36. </html>

三、v-if和v-for的注意事项

如果将v-if和v-for 在同一个标签内使用，会出现每次先循环，在去判断渲染，在性能上出现了浪费

要注意这个细节，在写代码时，可以将for包含到if判断中，使其不在一个标签内，从而避免了同是使用的情况。

这里，还会出现一个问题，如果使用index为索引，在渲染表单的时候就会出现，表单添加，表单内容没有出现变化，需要自己起一个唯一标志符。

附：根据某一个与待循环列表无关的属性决定是否展示渲染后的数组对象时，可以把 v-if 上移。

例子：根据 isShow 属性决定是否显示 users 列表

  1. users: [
  2.         {'name': '111'},
  3.         {'name': '222'},
  4.         {'name': '333'},
  5.         {'name': '444'}
  6.       ],

isShow: true

改良前：

  1. <ul>
  2.   <li v-for="user in users" v-if="isShow">
  3.     {{ user.name }}
  4.   </li>
  5. </ul>

改良后：

  1. <ul v-if="isShow">
  2.   <li v-for="user in users">
  3.     {{ user.name }}
  4.   </li>
  5. </ul>

总结

到此这篇关于Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解的文章就介绍到这了,更多相关Vue判断语句与循环语句用法内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号