vue条件渲染和列表渲染

在vue中我们可以使用v-if语句进行条件渲染,用v-for指令根据一组数组的选项列表进行渲染。本文就来为大家详细介绍一下vue中的条件渲染和列表渲染。

一、条件渲染

1、v-if语句

<div v-if="seen">hahahah</div>
<!-- v-if插入或者删除元素的指令 -->

1.jpg

如果seen为true,则显示,如果seen为false,则不显示

2、v-if和v-else语句

<div v-if="seen">123</div>
<div v-else>456</div>
<!-- v-if,v-else语句 -->

如果seen为true,则显示123,如果seen不为真,则显示456

3、v-if、v-else-if、v-else语句

<div v-if="gread>90">success</div>
<div v-else-if="gread>60">ok</div>
<div v-else>failed</div>
 
<!-- v-if,v-else-if,v-else语句 -->

2.jpg

如果gread大于90,则显示success,如果gread大于60,则显示ok,如果gread小于60,则显示failed

4、条件渲染配合template语句,template语句不会渲染到html中,只会包装多个html元素

<template v-if="seen">
    <div>ni</div>
    <div>hao</div>
    <div>cuihaoran</div>
</template>
 
 
<template v-else>
    <div>ni</div>
    <div>hao</div>
    <div>zhouyongbo</div>
</template>
<!-- template语法结合v-if语句,同时可以控制多条html语句,
template不会被渲染我html元素,仅仅用来包装多个元 -->

5、vue进行html元素切换,如果元素一样的,则不会重新创建和删除元素,比如我们下面的例子,我们在username的input标签中输入一个字符串,切换为passwd的input框,上一步输入的字符串还是会显示。

<template v-if="logintype === 'username'">
    <label>username:</label>
    <input type="text" placeholder="用户名">
</template>
 
<template v-else>
    <label>passwd:</label>
    <input type="text" placeholder="密码">
</template>
 
<button v-on:click = "clickFunc">切换</button>
 
<!-- 因为插入和删除元素是非常耗时的,所以如果有上面的例子,
我们2个template标签中的input标签完全一样,所有当我们在username中输入一个用户名,
然后点击切换后,passwd的输入框还是会有我们之前输入的信息,vue是复用之前的元素,不会 -->
<!-- 做新的增加和删除的操作 -->

我们看下clickFunc函数

3.jpg

我们在usernme这里输入一个1111。

4.jpg

点击按钮切换为passwd,111还会保留

5.jpg

6、如果我们不想vue帮我们复用元素,我们需要为标签设置一个key

<template v-if="logintype === 'username'">
    <label>username:</label>
    <input type="text" placeholder="用户名" key="username">
</template>
 
<template v-else>
    <label>passwd:</label>
    <input type="text" placeholder="密码" key="email">
</template>
 
<button v-on:click = "clickFunc">切换</button>
 
<!-- 如果我们不想复用,你就给重新创建和删除元素,那么vue提供了一个key的变量,
我们可以用这个告诉vue,不要复用,重新给我创建和生成元素 -->

6.JPG

这样,用key标记2个元素是不一样的,vue就会给我们重新创建元素

7、v-show,如果为false,则会给元素加一个display=false的属性,如果为true,则会给元素加一个display=true的属性,而v-if如果为false,则dom都不会有这个元素

<div v-show="seen">v-show</div>
 
<!-- v-show是控制元素是否显示的语句,不管v-show是否为真,这个元素都存在,
如果为false,则display为true而已,元素还在dom中 -->
 
<!-- 不支持tempalte和v-else语句 -->

8、v-if和v-for同时使用

<!-- v-if和v-show在一起使用 -->
<ul>
    <li v-for="item in items" v-if="item.isok">{{item.text}}</li>
</ul>

7.jpg

二、列表渲染

1、v-for渲染一个数组的方式1

<ul>
    <li v-for="item in items">{{item.text}}</li>
</ul>

2、v-for渲染一个数组的方式2,可以添加一个索引

<ul>
    <li v-for="(item,index) in items">{{item.text}},{{index}}</li>
</ul>
<!-- item是列表中的元素,index是索引,这个顺序不能变,从0开始 -->

3、v-for渲染一个数组的方式2,in和被of替代

<ul>
    <li v-for="(item,index) of items">{{item.text}},{{index}}</li>
</ul>
 
<!-- 这个例子和上面的例子效果是一样的,in可以替换为of -->

4、v-for渲染一个对象方式1

<div>
    <ol>
        <li v-for="obj in pipi">{{obj}}</li>
 
    </ol>
 
</div>

我们来看下pipi这个对象的

8.jpg

页面效果如下

9.jpg

5、v-for渲染一个对象的方式2

<div>
    <ol>
        <li v-for="(obj,value) in pipi">{{obj}}:{{value}}</li>
 
    </ol>
 
</div>

页面效果如下

10.jpg

6、v-for渲染对象的方式3,同样可以渲染索引

<div>
    <ol>
        <li v-for="(obj,value,index) in pipi">{{obj}}:{{value}}:{{index}}</li>
 
    </ol>
 
</div>

页面效果如下

11.jpg

7、v-for渲染一个组件

首先我们需要先定义一个组件

12.jpg

然后在dom中使用这个组件

<todu v-for="item in items" v-bind:name="item.text"></todu>

看下页面的效果

13.jpg

最后来说明一下

1.jpg

最后补充一个知识点

2.jpg

8、v-for的一段取值范围

<div>
    <span v-for="n in 9">{{n}},</span>
 
</div>

页面效果如下

3.jpg

9、v-for和template结合起来用

<div v-for="n in 10">
    <template>
        <label>username:</label>>
        <input type="text" placeholder="username">
 
    </template>>
</div>

页面效果

4.jpg

10、v-for结合计算属性进行数据处理后在循环

比如我们有一个数字的列表,我们只想显示其中的偶数

5.jpg

然后我们需要定义一个计算属性,将这个列表处理

6.JPG

然后我们需要新的值就可以了

7.jpg

如果我们想实现上面的效果,我们可以使用v-for搭配v-if来实现

8.jpg

页面效果如下

9.jpg

前端开发学习请关注HTML中文网

以上就是vue条件渲染和列表渲染的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏