Vue学习——条件渲染与列表渲染指令（14）

最新推荐文章于 2023-05-12 14:37:21 发布
最新推荐文章于 2023-05-12 14:37:21 发布
阅读量427 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52480906/article/details/124732775
版权

条件渲染指令用来辅助开发者控制DOM的显示与隐藏，条件渲染指令有：v-if,v-show

v-if与v-show

在这里插入图片描述
在这里插入图片描述

下面是他们的详细区别
在这里插入图片描述

v-else-if与v-else

配套使用效果更佳
在这里插入图片描述

在这里插入图片描述
写个表格，添加bootstrap样式
在这里插入图片描述

在这里插入图片描述
然后在数据区写个list
在这里插入图片描述

这时候我们将v-for循环渲染列表指令写入表格
item作为变量名，in为固定格式，list为数据内的表格标签
在这里插入图片描述

当然vue还提供了一个index，写法如下
<tr v-for="(item,index) in list">
其中，item、index、list为形参，可自行修改
我们将其写入
在这里插入图片描述
在这里插入图片描述

当然，index也可以给标签用
在这里插入图片描述

当然，官方建议：最好在使用v-for时，需要添加:key属性，并且尽量把id作为key的值（key的值只能是字符串/数字类型且不重复，且不要将index值作为key值）

在这里插入图片描述

Calendo
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue简明实用教程(07)——v-for指令
谷哥的小弟
11-14 1394
v-for指令常用于对集合进行遍历。
v-show条件渲染
xiaoxingxingzai的博客
08-27 2985
v-show条件渲染 1.另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： <h1 v-show="ok">Hello!</h1> 值0也表示false，其他数值表示true。 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 注意，v-show 不支持 <t...
【Vue教程四】条件渲染、列表渲染、数组更新
qing_小诺的博客
07-11 1867
一、条件渲染：【v-if】【v-show】 1、v-if 指令用于条件性地渲染一块内容。 1.1、在元素中使用 v-if 指令： <body> <div id="app"> <h1 v-if="seen">Hello qing!</h1> <div v-if="type === 'A'"> .........
[Vue]列表渲染
emmmm.....
10-09 2483
1. 列表渲染 1.1 v-for 1.2 v-for 中的索引 2. v-for 遍历数组 3. v-for 遍历对象 4. v-for 遍历字符串 5. v-for 遍历指定次数 6. key的作用与原理 6.1 key 6.2 key错误演示 6.2.1 index作为key 6.2.2 不写key 6.2.3 出现错误的解释 6.3 可以对数组数据进行唯一标识的作为key 6.3.1 示例 6.3.2 解释 6.4 key的作用 6.5 用index作为key可能会引发的问题 6.6 开发中如何选择
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 8970
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
浅析Vue.js 中的条件渲染指令
10-17
主要介绍了Vue.js 中的条件渲染指令，Vue.js 中的条件渲染指令可以根据表达式的值，来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考...
深入理解Vue 的条件渲染和列表渲染
08-29
本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
学习vue.js条件渲染
10-20
主要和大家一起学习vue.js条件渲染，代码注释详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【前端热门框架【vue框架】】——条件渲染和列表渲染的学习的秒杀方式.txt
最新发布
04-30
【前端热门框架【vue框架】】——条件渲染和列表渲染的学习的秒杀方式
简单理解Vue条件渲染
09-01
主要帮助大家简单理解Vue条件渲染，什么是Vue条件渲染,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
列表渲染（通俗易懂） vue.js
linyan12138的博客
09-28 2666
基本概念 列表渲染通俗易懂一点的解释就是获取列表中的各种数据，并将它展示出来，例如一个数组中分别有a，b，c三个数据，那我们就可以用v-for来对数组进行渲染，以获得a，b，c。 渲染方式 v-for ：这是一个指令，搭配item in items来使用，如v-for ="item in items"，注意两点： 1.此处item和items是自己取的名字，主要的意思是渲染items列表，获取的数据用item来取名代替。 ...
Vue---列表渲染
gaoqiandr的博客
05-12 2092
本文主要介绍Vue中的列表渲染的基本用法
使用vue的v-for生成table , 给table加上序号
aijian6549的博客
10-26 1999
现在有一个使用mybatis的分页插件生成的table，table中数据是通过vue获得的 ， 前台显示使用<tr v-for="item in items"> 后台vue获取数据使用分页插件进行查询然后使用回调,将结果返回给vue的一个model /** * 分页控件加载 * @param data */ function aspnetPagerIn...
vue中解决v-for使用报红并出现警告问题
生如夏花 炫至茶靡
01-15 2万+
代码报红对于追求优美代码的强迫症患者来说看着很不舒服，报红如下： 控制台中也会有： (Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key
vue table v-for v-for其他用法
spfLinux的博客
01-10 9254
性别 年龄 分数 {{item.sex}} {{item.age}} {{item.score}} {{stu[0].sex}} {{stu[0].age}} {{stu[0].score}} {{stu[1].sex}} {{stu[1].age}}
Vue实践--V-for指令
codesWay的博客
12-04 1万+
当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令，其值类似于item in items；其中items是数组或者对象，item自然就是其中的一项，in 也可使用 of。 当遍历数组的时候有一个可选项index，是当前项的索引 类似与 v-for = (item,[index]) in items; {{index}}.{{book.bookName}}
Vue指令v-for之遍历输出JavaScript数组，json对象的几种方式
热门推荐
mosowe
09-18 9万+
定义数据： &lt;script&gt; new Vue({ el:"#test", data:{ message:"infor", list:["a","b","c","d","e"], web:{
8.条件渲染指令
potato123232的博客
03-13 237
如果你一开始不需要展示，那么v-if的初始加载速度要比v-show更快，因为少渲染了一个元素。v-if的语义要比v-show更强，即使会影响部分性能，我们也通常会使用v-if。当flag为true的时候，v-if与v-show控制的div都会被显示出来。v-if是这个元素直接没了，v-show使用的是display:none。v-if与v-show在视觉效果上是一样的，但他们的隐藏方法不一样。v-if与v-show都可以控制DOM的显示与隐藏。如果要频繁切换的话v-show的性能更好。
利用vue+element ui渲染城市列表
07-20
在这个示例中，我们使用了`el-select`和`el-option`组件来实现下拉选择框，并通过`v-for`指令循环渲染城市列表。 你可以根据实际需求修改`cities`数组中的城市数据，或者从API中获取城市数据，并将其绑定到`el-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值