关于v-if和v-for不能一起使用在同一个标签上

更新日期: 2019-07-26阅读: 9.7k标签: 标签

v-if 和 v-for 一起使用在同一个标签上会怎么样?

看例子:
使用v-for将如下object的所有value遍历显示,其中有一个value是数组

数据

testData:  {
    name: 'TESTOBJECT', 
    id: 10,
    data: [1.67, 1.33, 0.98, 2.21]
  }

目标运行结果:

TESTOBJECT
10
1.67
1.33
0.98
2.21


初步实践:
.html:

 <ul>
    <li v-for="value in testData">
       <div id="test" v-if="Array.isArray(value)" v-for="item in value">{{item}}</div>
       <div id="test1" v-else>{{value}}</div>
    </li>
  </ul>

运行结果:
打印了10遍TESTOBJECT,10遍10,列出数组内容:1.67 1.33 0.98 2.21

为什么会有10个TESTOBJECT呢?尝试多加两个字母’TESTOBEJECTss‘,此时输出12个TESTOBEJECTss,10个10数字

原因分析:v-for优先级高于v-if,因此上面的html文本中两行div的执行大致是以下顺序:

 
  this.value.map(function(item){
     if(Array.isArray(value)){
        return item; // T E S T O B J E C T
     }else{
        return value; // TESTOBJECT
     }
  })

遍历object的所有value(即li中的v-for),当拿到testData的第一个元素TESTOBJECT时,执行div中的v-for,此时的item对应T E S T O B J E C T这10个元素,于是循环10次,每一次都判断当前元素是否是array,很显然每次判断都是object,于是便打印出10个TESTOBJECT。
10个数字10的情况类似,不过由于是遍历一个数字,那么数字大小就影响循环的次数,如果改为5,则运行显示5遍5.


小结:

vue官网推荐将v-if移到父元素,如ul中,先检查,后循环遍历。不要用在同一个元素上。

对上面例子进行如下修改:

 <ul>
    <li v-for="value in testData">
        <div v-if="Array.isArray(value)">
            <div v-for="item in value">{{item}}</div>
        </div>
        <div v-else>{{value}}</div>
    </li>
  </ul>

运行结果:

TESTOBJECT
10
1.67
1.33
0.98
2.21


链接: https://fly63.com/article/detial/4385

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

html 标签优化_如何优化网站HTML标签代码优化

如何优化网站HTML标签代码优化?选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等

js动态添加html标签和属性_手动插入meta、script、div、img等标签

web网页是由 html标签一层层组成的,js也可以动态添加对应的标签,比如mate标签、script标签、div标签、img标签等,动态创建的方法基本都差不多,下面将简单介绍下如何实现

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

<script>标签的属性

src定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。

10 个不常用但你有必要知道的 html 标签

HTML 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!