v-if 踩坑

最新推荐文章于 2024-11-25 11:44:53 发布
原创 最新推荐文章于 2024-11-25 11:44:53 发布 · 870 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Vue.js中使用v-if和v-for指令时的常见问题，特别是当两者同时应用于同一元素时可能遇到的bug。文章通过具体代码示例展示了v-if在单独使用时的正常行为，以及在v-for循环中的失效问题，并提供了修正方案。

一个个写的时候，v-if + this 可以： 

                <van-action-sheet v-model="show" title="请选择上市进程" :actions="actions" @select="onSelect" >

                    <div class="sb" @click="change" :class="selecked?'fontcolor':''">尚未改制<van-icon v-if="this.selecked" name="success" class="checked-icon" color="#3271E3"/></div>

                    <div class="sb" @click="change" :class="selecked?'fontcolor':''">改制进程中<van-icon v-if="this.selecked" name="success" class="checked-icon" color="#3271E3"/></div>                    

                    <div class="sb" @click="change" :class="selecked?'fontcolor':''">已进入辅导期<van-icon v-if="this.selecked" name="success" class="checked-icon" color="#3271E3"/></div>

                    <div class="sb" @click="change" :class="selecked?'fontcolor':''">材料已报证监会<van-icon v-if="this.selecked" name="success" class="checked-icon" color="#3271E3"/></div>                                                               

                </van-action-sheet> 

 

报错：

v-for 情况下，v-if + this 不行 

                    <div class="sb" @click="change" :class="selecked?'fontcolor':''" v-for="item in titles" :key="item">{{item}}<van-icon v-if="this.selecked" name="success" class="checked-icon" color="#3271E3"/></div> 

以上两种情况下，selected都定义了（没错，都定义了，所以不能看第2种情况错误原因） ，不信看下面

定义：

    data(){

        return{

            username: '',

            isbgcolor: true,

            isSelected: false,

            show: false,

            selecked: false,

            titles: ['cc','vv','bb'],       

        }

    },

                    <div class="sb" @click="change" :class="selecked?'fontcolor':''" v-for="item in titles" :key="item">{{item}}<van-icon v-if="selecked" name="success" class="checked-icon" color="#3271E3"/></div>  

去掉 this. 就可以了 

from_shanghai
关注
Opencv-python3，处理rtsp流视频-----踩坑总结+VideoCapture.get()详解：
HHH_LLL的博客
10-19 3906
最近项目在用opencv处理rtsp流相机，中间也踩了很多坑，这里写篇博客帮助那些可能会遇到相似问题的同胞。 注：我这里同时用到了四个相机 1.电脑同时连接多个相机后，之后去打开rtsp相机时，初次打开特别耗时，甚至打开失败，在Win10上需要修改四个相机的网关，将其修改成不一样的网关，防止网关冲突。(推荐使用CMS软件去修改相机的一些参数和网络配置) 2.如果电脑性能有限制，将rtsp显示...
element-ui踩坑集合
Just do it！
03-07 451
1、input框无法输入的问题 在input中双向绑定的变量，需要在data中设置默认值，具体原因可以了解双向绑定的原理 2、动态列错乱 给每个列加key值 <el-table-column v-if="handleShowList('user')" key="user" sortable prop="user" label="用户" &g...
v-if踩过坑
colorfulSnow的博客
06-27 382
v-if一定要是我们判断后所需展现元素的父元素。 这边研究了很久当实现v-else时总是会想结果重复两遍。但是没有很朱ESLINT报错（这个错误不会影响运行），所以一直没有找到。将v-if放在父元素上后(O_O)就解决了。 一定要注意ESLINT报错ε≡٩(๑>₃<)۶ 一心向学 ...
使用v-if的踩坑日记
匆匆的博客
07-31 647
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。 在上面的代码中切换选项的时候，没有清除input已经输入的内容。因为两个模板使用了相同的元素，input不会被替换掉----仅仅是替换了它的name和id而已，并不能准确的取分两个元素。 这样也不总是符合实际需求，所以 Vue 为你提...
[ 工作常用 ] 注意点~
lx233
07-31 408
1 vue 协议认证 (1)三元表达式简单写法 取反 this.agree_protocal=!this.agree_protocal 等同于this.agree_protocol=(this.agree_protocol===true?false:true); (2) 用原生的v-if: 首先，v-if内也是this，其次要用引号。 <image v-if="!this.agree_protocol" @click="agreementChange" src...
Vue学习之v-if和v-for指令
晓宇博客
07-20 726
v-if和v-show v-if和v-show的作用有点类似，我们一起来看下，案例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
17.条件渲染之 v-if ---(vue入门 文档学习记录)
爱飞的笨鸟的博客
08-19 233
v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>kkk</title> <script type="text/ja...
glm-4v-9b 踩坑（4-bit量化，bitsandbytes 异常）
phynikesi的博客
11-25 1690
主要解决2个问题： 1 glm-4v-9b 的4-bit加载 2 bitsandbytes 异常处理
VUE—van-tab切换不同样式的组件 使用v-if 解决闪动问题以及分页问题（吐血踩坑）
Poppy_LYT的博客
08-25 3051
<template> <div class="content-wrap"> <van-tabs v-model="tabId" @change="changeTab"> <van-tab title="tab1" /> <van-tab title="tab2" /> <van-tab title="tab3" /> </van-tabs> <van-li
UR5-Pick-and-Place-Simulation 调试笔记（二）-2024.04.28
qq_36674060的博客
04-28 495
【代码】UR5-Pick-and-Place-Simulation 调试笔记（二）-2024.04.28。
使用vue的v-if判断数组长度length报错解决方案
林中明月间丶
01-07 4280
https://blog.youkuaiyun.com/qq_39343308/article/details/85100219 https://blog.youkuaiyun.com/a_grain_of_wheat/article/details/82216923?utm_source=blogxgwz5推荐
v-if的使用记录
a99101的博客
02-13 642
自己是v-if使用记录
vue笔记-基础篇-v-_指令的语法
luffysk的博客
07-07 571
1.计算属性 计算属性是可以配置在options中的，因此先来看下官网对它的介绍 通过文档可知它的结构为computed: {},其中对象中可以是key：function或者是key：{get：function，set：function} 它的this执向的是vue实例而不是函数内部，因此在此函数中访问vue中的属性可以直接通过this.属性的方式访问 它的结果会被缓存起来 总结一下，计算属性的作用和普通属性一样，只不过比普通属性多了一些功能，能使用普通属性的地方就可以通过计算属性替换 举个例子，比如在插
Vue条件语句中v-if、v-else、v-else-if的用法
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
01-09 2866
Vue条件语句中v-if、v-else、v-else-if的用法
Vue学习(六)-v-if的使用
weixin_44038881的博客
12-05 5204
v-if 的使用 v-if 满足一定条件渲染数据 使用 <div id="app"> <section v-if="isShow"> <!-- isShow 为 true 时，显示下面的div --> <div>我是div，isShow为True时我显示</div> </section&gt...
v-if无法获取this.$refs,真正有效的解决方法。vue不可以直接修改props值。
weixin_46972395的博客
08-05 3096
v-if无法获取this.$refs,真正有效的解决方法。vue不可以直接修改props值。
html获取vue中的data数据时，不应该加this
从入门到放弃的博客
06-03 5741
html获取vue中的data数据时，不应该加this，正确代码如下： <div> <span id="a" v-if="pageNum===1">页码：{{pageNum}}</span> </div> ... export default(){ data(){ return{ ...
vue基础 指令篇
shjd_J的博客
07-09 378
Vue.js 1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架Vue是一个Vue是一个用于的框架Vue是一个用于构建用户界面得2.渐进式框架介绍a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的类似于Nodejs,拆分成很多个小模块b. 在项目中我们用到什么，就导入什么这样可以保证我们用到的最少c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源(1)Vue是什么？js框架(2)Vue干什么用
v-if 判断语句
热门推荐
齐枫的博客
06-17 7万+
这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。而且，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/删除元素时自动应用过渡效果 vue {{msg}} 鼠标悬停几秒钟查看此处动态绑定的提示信息！附加刷新的时间 --> v-if=
uniapp v-if判读v-for中的值是否等于1
最新发布
11-30
<think> 我们正在处理的问题是：在uni-app中，如何在v-for循环中使用v-if判断当前项的值是否等于1？ 根据用户提供的引用和问题，我们需要结合Vue.js和uni-app的语法规则来解答。 在Vue中，v-for和v-if同时使用在同一元素上时，v-for的优先级高于v-if。这意味着v-if会在每次循环中独立运行。但是，Vue官方通常不建议在同一元素上同时使用v-for和v-if，因为这可能导致性能问题（如果v-if的条件不满足，元素仍然会被遍历）或逻辑错误。 在uni-app中，同样遵循Vue的语法规则。因此，我们可以采用以下几种方式： 1. 使用计算属性（computed）来过滤数组，这样在模板中只需要使用v-for，而无需使用v-if。 2. 将v-if放在一个包裹元素上（比如<template>标签），这样不会渲染额外的元素，但注意uni-app中有些平台（如小程序）对template的支持可能有限。 3. 在v-for循环内部使用<block>标签（小程序端支持）或<template>标签包裹，并在内部使用v-if。 但是，用户的问题具体是“判断v-for中的值是否等于1”，即只显示那些值等于1的项？还是指在循环内部根据某个值是否等于1来显示不同的内容？ 根据问题描述，我们假设用户的需求是：在v-for循环中，只显示那些满足条件（值等于1）的项。 解决方案： 方法一：使用计算属性过滤数组 在js中： computed: { filteredItems() { return this.items.filter(item => item.someProperty === 1); } } 在模板中： <view v-for="(item, index) in filteredItems" :key="index"> ... </view> 方法二：在v-for内部使用v-if，但将v-if放在一个包裹元素上（例如<template>） <template v-for="(item, index) in items"> <view v-if="item.someProperty === 1" :key="index"> ... </view> </template> 注意：在Vue2中，当v-for和v-if处于同一节点时，v-for的优先级比v-if高。所以方法二中的写法是可行的，因为v-if不在同一个元素上，而是在内部的元素上。 但是，根据用户提供的引用[1]和[3]中，他们遇到了使用v-if和v-else-if的问题。引用[3]中尝试在同一元素上同时使用v-for和v-if，但注意引用[3]的写法是： <view ... v-for="..." @click="..." :v-if="showMenu(item)"> 这里使用了`:v-if`，这是错误的，应该直接使用`v-if`（没有冒号）。因为v-if是一个指令，而不是一个绑定属性。所以正确的写法是去掉冒号：`v-if="showMenu(item)"`。 另外，引用[4]提到在插槽中使用v-if报错，这是因为在非数组对象上使用了迭代，但我们的问题不涉及插槽。 因此，针对用户的问题，给出以下具体示例： 假设我们有一个数组list，每个元素有一个属性type，我们只想显示type等于1的项。 方法一（推荐）： <template> <view> <view v-for="(item, index) in filteredList" :key="index"> 显示：{{ item.name }} </view> </view> </template> <script> export default { data() { return { list: [ { id: 1, type: 1, name: 'A' }, { id: 2, type: 2, name: 'B' }, { id: 3, type: 1, name: 'C' } ] } }, computed: { filteredList() { return this.list.filter(item => item.type === 1); } } } </script> 方法二：使用<template>包裹 <template v-for="(item, index) in list"> <view v-if="item.type === 1" :key="index"> 显示：{{ item.name }} </view> </template> 注意：在方法二中，我们使用了<template>包裹，这样不会渲染额外的元素。但是要注意，在uni-app中，<template>在小程序端会被编译成block，所以是支持的。同时，我们给内部的view绑定了key，这是必要的。 但是，如果用户的需求不是过滤数组，而是根据某个值显示不同的内容（比如在循环内部，当某个值等于1时显示一个图标，等于2时显示另一个图标），那么我们可以直接在循环内部使用v-if和v-else。 例如： <view v-for="(item, index) in list" :key="index"> <view v-if="item.type === 1">类型1</view> <view v-else-if="item.type === 2">类型2</view> <view v-else>其他</view> </view> 因此，我们需要明确用户的需求是过滤整个项（只显示满足条件的项）还是根据条件显示不同的内容块。 根据用户的问题描述：“使用v-if判断v-for中的值是否等于1”，我们理解为过滤整个项，即只显示值等于1的项。 但是，如果用户需要在同一个循环中显示所有项，只是根据值是否等于1来改变部分内容，那么就是第二种情况。 由于问题没有明确，我们给出两种情况的示例。 总结回答： 在uni-app中，在v-for循环中使用v-if判断值是否等于1，有两种常见情况： 1. 如果希望只显示数组中满足条件（值等于1）的项，推荐使用计算属性过滤数组，然后在v-for中遍历过滤后的数组。或者使用<template>包裹循环，并在内部元素上使用v-if。 2. 如果希望遍历所有项，但在每个项的内部根据值是否等于1来显示不同的内容，则在循环内部使用v-if或v-else。 注意：避免在同一元素上同时使用v-for和v-if（即不要写成：<view v-for="..." v-if="...">），因为这可能导致性能问题或渲染错误。 下面给出代码示例： 情况一：过滤数组，只显示type等于1的项 示例1（计算属性）： ```html <view v-for="(item, index) in listFilteredByType1" :key="index"> {{ item.name }} </view> ``` ```javascript computed: { listFilteredByType1() { return this.list.filter(item => item.type === 1); } } ``` 示例2（使用template）： ```html <template v-for="(item, index) in list"> <view v-if="item.type === 1" :key="index"> {{ item.name }} </view> </template> ``` 情况二：每个项内部根据type显示不同内容 ```html <view v-for="(item, index) in list" :key="index"> <view v-if="item.type === 1"> 这是类型1：{{ item.name }} </view> <view v-else> 其他类型：{{ item.name }} </view> </view> ``` 请根据实际需求选择合适的方式。 注意：在示例2（情况一）中，我们使用<template>循环，然后内部使用v-if，这样不会渲染多余的容器。但要注意，在循环中key应该绑定在内部的真实元素上，而不是<template>上。 另外，在uni-app中，如果使用情况二的写法，且条件分支较多，可能会因为小程序的限制（模板解析差异）而出现问题，但基本条件判断是支持的。 如果遇到问题，请检查是否在v-for和v-if同时使用在同一元素上，或者是否在条件分支中使用了不支持的元素。 最后，关于用户引用的踩坑记录（引用[1]），他们遇到的是v-else-if的问题。如果用户需要多条件判断，可以使用v-if、v-else-if、v-else，但要注意条件分支的连续性。在引用[1]中，将v-else-if改为v-if后问题消失，可能是因为条件分支的逻辑被打破了（比如多个条件同时满足），所以需要检查条件是否互斥。 因此，在编写条件时，确保逻辑正确，避免多个条件同时满足导致渲染异常。 根据以上分析，我们生成相关问题： </think> 在 uni-app 中使用 `v-if` 判断 `v-for` 循环中的值是否等于 1，有以下两种推荐方法： ### 方法 1：使用计算属性过滤数据（推荐） ```html <view v-for="(item, index) in filteredList" :key="index"> <!-- 只显示 item.value === 1 的数据 --> {{ item.name }} </view> ``` ```javascript export default { data() { return { originalList: [ { id: 1, value: 1, name: '苹果' }, { id: 2, value: 2, name: '香蕉' }, { id: 3, value: 1, name: '橙子' } ] } }, computed: { // 通过计算属性过滤出 value=1 的项 filteredList() { return this.originalList.filter(item => item.value === 1) } } } ``` **优点**： - 逻辑清晰，性能优化（减少 DOM 操作） - 避免 `v-for` 和 `v-if` 优先级冲突问题[^1] ### 方法 2：使用 `<template>` 标签包裹 ```html <template v-for="(item, index) in originalList"> <view v-if="item.value === 1" :key="index"> <!-- 只显示 value=1 的项 --> {{ item.name }} </view> </template> ``` **注意事项**： 1. 必须使用 `<template>` 包裹，不可直接在循环元素上用 `v-if`（会导致渲染问题）[^3] 2. `:key` 绑定在内部元素上，不可放在 `<template>` 标签 3. 小程序端需确保 uni-app 版本 > 2.7.0（对 `<template>` 支持更完善） ### 错误用法示例 ```html <!-- 错误！v-for 和 v-if 不能直接共存 --> <view v-for="(item, index) in list" v-if="item.value === 1" <!-- 会引发渲染异常 --> :key="index"> </view> ``` ### 其他场景 若需在循环内**同时显示不同条件的内容**（非过滤）： ```html <view v-for="(item, index) in list" :key="index"> <view v-if="item.value === 1">值等于1的内容</view> <view v-else>其他内容</view> </view> ``` > **最佳实践建议**： > - 优先使用 **计算属性过滤数据**（方法1），性能最佳 > - 涉及复杂条件时用 **方法2**，但注意平台兼容性 > - 避免 `v-for` 和 `v-if` 直接共存于同一元素[^1][^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值