vue使用v-if和:class完成条件渲染

Vue条件渲染、列表渲染及样式控制

 1.使用v-if 和v-else 完成主body和暂无数据两个<tbody>标签的条件渲染(注意与v-show效果的区别) 

2.v-for完成列表渲染

3.:class完成分数标红的条件控制

 删哪个就传哪个的id,基于这个id去过滤掉相同id的项,把剩下的项返回

 <td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td>




 del (id) {
            // console.log(id)
            this.list = this.list.filter(item => item.id !== id)
          },

a标签的默认点击事件会跳转 这里要禁止默认事件 

即使用@click.provent 就可以,像调方法一样传事件参数即可

Vue 3中,同时使用v-ifv-for时,由于v-if比v-for优先级更高,v-if条件无法访问v-for作用域内定义的变量别名,所以官网不推荐二者同时使用。不过,仍有一些可行的方法: - **在v-for修饰元素的子元素上使用v-if**:避免v-forv-if同时作用在一个元素上,可在v-for修饰元素的子元素上使用v-if。 ```html <template> <div v-for="item in items" :key="item.id"> <span v-if="item.shouldShow">{{ item.name }}</span> </div> </template> ``` - **将v-if改为v-show**:把v-if改为v-show,这样二者可作用在同一个元素上。v-show只是基于条件来切换元素的CSS display属性,而不是像v-if那样销毁重新创建元素。 ```html <template> <div v-for="item in items" :key="item.id" v-show="item.shouldShow"> {{ item.name }} </div> </template> ``` - **使用template作为v-for的渲染模板**:使用template标签进行v-for渲染,再在内部元素使用v-if。 ```html <template> <template v-for="(item, index) in lists" :key="'item-' + item.key"> <li class="list-group-item" v-if="!item.checked"> <div class="checkbox" @click="() => { item.checked = !item.checked }"> <input type="checkbox" class="form-check-input" :id="'item-' + index" v-model="item.checked" /> <label> {{ item.name }} </label> </div> </li> </template> </template> ``` - **将v-if放到循环列表元素的父元素中或使用template包裹**:避免在同一元素上使用,可将v-if放到父元素或用template包裹v-for渲染的元素,再在template上使用v-if。 ```html <template> <template v-if="isExpired === 1"> <div v-for="item in inHouseList" :key="item.id">{{ item.bar_code }}</div> </template> </template> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值