v-for循环数字

v-for是可以用来循环数字的，比如你要循环1-99的数字，可以直接写成下面的样子。

<span v-for="count in 99">{{count}},</span>

这样就可以快速的循环出1-99的值在页面上。可以在浏览器中看一下这个效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@next" ></script>
</head>
<body><div id="app"></div>
</body>
<script>
const app=Vue.createApp({ data(){return{}},methods:{},template:`<span v-for="count in 12">{{count}}<br /></span>`
})
const vm=app.mount("#app")
</script>
</html>

v-for中如何使用判断

你看一下，上篇文章写的关于数组循环的小例子，现在的新需求有些变化，由于公司不想招初级前端工程师了，我们想刨除出去，只显示中级和高级。这时候你很可能把代码写成这个样子。

<ul><li v-for="(item,index) in listArray":key="index+item"v-if="item != '初级'">[{{index}}]{{item}}</li>
</ul>

在浏览器中进行预览，你会发现初级的循环项，并没有消失。

这是为什么呢？
因为v-for循环的优先级要高于v-if判断的优先级，所以判断失效。

正确的写法应该是在<li>外层独立出一个标签，在<li>上做循环。
比如写成下面的代码。

template:`<ul><div v-for="(item,index) in listArray" :key="index+item"><li v-if="item != '初级'">[{{index}}]{{item}}</li></div></ul>`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@next" ></script>
</head>
<body><div id="app"></div>
</body>
<script>
const app=Vue.createApp({ data(){return{listArray:['初级','中级','高级']}},methods:{},template:`<ul><div v-for="(item,index) in listArray" :key="index+item"><li v-if="item != '初级'">[{{index}}]{{item}}</li></div></ul>`
})
const vm=app.mount("#app")
</script>
</html>

这时候到浏览器中预览，初级项如愿以偿的消失了。

template 标签的使用

上面的结果完美吗？
当你打开浏览器的控制台，看Elements选项卡时，你会发现DOM结构是有问题的，明明循环出两项，却有3个<div>，而且这种外层套用<div>里边使用<li>的形式，不符合HTML语法的基本结构。

为了解决这个问题，Vue给我们提供了<template>模版标签，也就是一个空的占位符，目的就是解决模板中为完成业务逻辑，而使用的无用html标签的现象。

现在可以把上面的代码写成这样。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@next" ></script>
</head>
<body><div id="app"></div>
</body>
<script>
const app=Vue.createApp({ data(){return{listArray:['初级','中级','高级']}},methods:{},template:`<ul><template v-for="(item,index) in listArray" :key="index+item"><li v-if="item != '初级'">[{{index}}]{{item}}</li></template></ul>`
})
const vm=app.mount("#app")
</script>
</html>

这时候再到浏览器看一下结果，这样就符合我们的期待的样子了。

<ul><!--v-if--><li>...</li><li>...</li>
</ul>

到这也基本讲完了vue3中对于列表循环的基本操作和一些小坑，希望对大家有帮助。

为了方便大家学习，附上本文所有代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@next"></script>
</head><body><div id="app"></div>
</body>
<script>
const app = Vue.createApp({data() { return { listArray: ['初级', '中级', '高级'],listObject:{ DogOne:'黑背', DogTwo:'泰迪', DogThree:'金毛' }} },methods:{handleChangeBtnClick(){this.listArray.push('willem')},},template: `<ul><template v-for="(item,index) in listArray" :key="index+item"><li v-if="item != '初级'">[{{index}}]{{item}}</li></template></ul><button @click="handleChangeBtnClick">点我改变</button><ul><li v-for="(value,key,index) in listObject" :key="key">[{{index}}]{{value}}-{{key}}</li></ul><span v-for="count in 99">{{count}},</span>`
})
const vm = app.mount("#app")
</script>
</html>

18 v-for中使用v-if结合template标签的使用相关推荐

关于template标签用法总结(含vue中的用法总结)
文章目录一.html5中的template标签二.template标签操作的属性和方法三.vue中的template 1.template标签在vue实例绑定的元素内部 2.vue实例中的tem ...
oracle设置缓存大小设置多少,【数据库类※从V$DB_CACHE_ADVICE中设置数据缓冲大小※】...
[数据库类※从V$DB_CACHE_ADVICE中设置数据缓冲大小※] Oracle 9i引入了一个新的途径来预测数据缓冲cache中附加数据缓存的所带来的好处的多少.V$DB_CACHE_A ...
X$BH及V$BH中各字段意义
X$BH SYS用户可查询 buffer header数据,可以从数据库的数据字典表中查询得到,这张字典表就是x$bh,其中的bh就是指buffer headers,每个buffer在x$bh中 ...
关于v$process与v$session中process的理解
v$session有个process字段,V$PROCESS有个SPID字段,这两个字段是不是一个意思呢?是不是都代表会话的操作系统进程呢? 官方文档上的解释: SPID VARCHAR2( ...
将编号为0和1的两个栈存放于一个数组空间V[m]中。
目录 1.题目描述 2.算法实现 1.题目描述将编号为0和1的两个栈存放于一个数组空间V[m]中,栈底分别处于数组的两端.当第0号栈的栈顶指针top[0]等于-1时该栈为空:当第1号栈的栈顶指针to ...
oracle 查看动态性能视图,Oracle 中的V$ 动态性能视图
v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...
软件开发中的V字模型与W模型（使开发与侧试分离）
■前言关于 W字模型,以前好像听过, 但是印象不深刻,几天有听别人说了一遍, 采用W字模型的主要目的是,测试与开发分离. ■瀑布开发中的V字模型与 W模型 --- ■吐槽 ⇒ W字模型很少有项目 ...
oracle v rman status,RMAN 中V$ARCHIVED_LOG 中STATUS 为X 的文件处理
记录一下[@more@] 今天发现RMAN 中V$ARCHIVED_LOG 中STATUS 为"X" 的文件,想起是因为手动删掉错几个日志造成的,通过如下的方法把RMAN 中的记录 ...
关于v$process与v$session中process的理解(转载)
http://www.itpub.net/thread-1077321-1-1.html(出处) 关于v$process与v$session中process的理解说明 v$session有个proc ...
matlab中 u v =eig功能,Matlab eig(.)最大支持多大的方阵？
Matlab eig(.)最大支持多大的方阵? 关注:243 答案:2 手机版解决时间 2021-02-11 21:23 提问者彼岸独舞 2021-02-11 03:08 Matlab eig( ...

18 v-for中使用v-if结合template标签的使用

[基础]v-for列表循环详细讲解-2

v-for循环数字

v-for中如何使用判断

template 标签的使用

18 v-for中使用v-if结合template标签的使用相关推荐

最新文章

热门文章