Vue------第三天(条件渲染：v-if、v-show;列表渲染:v-for)

最新推荐文章于 2022-07-02 11:17:21 发布
最新推荐文章于 2022-07-02 11:17:21 发布
阅读量151 收藏
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/yj1993/blog/1577789
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、条件渲染

1.v-if

(1)在<template>元素上使用v-if条件渲染分组

当想切换多个元素的时候，可以把一个<template>元素当做不可见的包裹元素，在上面使用v-if,最终渲染结果不包括<template>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <template v-if="ok">
            <h1>Hello</h1>
            <h2>World</h2>
        </template>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                ok: true
            }
        })

    </script>
</body>
</html>

渲染结果如下： 渲染结果

(2)v-else

v-else必须紧跟在带v-if或者v-else-if的元素后面，否则将不会被识别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="ok">
            Now you can
        </div>
        <div v-else>
            Now you can not
        </div>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                ok: true
            }
        })

    </script>
</body>
</html>

(3)v-else-if

v-else-if必须紧跟在v-if或者v-else-if的元素之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="name === 'yj'">
            My name is yangjiao
        </div>
        <div v-else-if="name === 'lp'">
            My name is lupeng
        </div>
        <div v-else-if="name === 'lz'">
            My name is lize
        </div>
        <div v-else>
            Not Name
        </div>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                name: 'yj'
            }
        })

    </script>
</body>
</html>

(4)用key管理可复用的元素

Vue通常会复用已有元素而不是从头开始渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input type="text" placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input type="text" placeholder="Enter your email" key="email-input">
        </template>
        <button type="button" v-on:click="toggleLogin()">
            转换登录方式
        </button>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                loginType: 'username'
            },
            methods: {
                toggleLogin: function () {
                    if(this.loginType === 'username'){
                        this.loginType = 'email'
                    } else{
                      this.loginType = 'username'
                    }
                }
            }
        })

    </script>
</body>
</html>

2.v-show

  • 作用：根据条件展示元素
  • 带有v-show的元素始终会被渲染并保留在DOM中
  • v-show指令只是简单的切换元素的CSS属性的display
  • PS:v-show不支持<template>和v-else
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-show="ok">
            Hello
        </h1>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                ok: true
            }
        })

    </script>
</body>
</html>

3.v-if vs v-show

(1)v-if

  • 确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建~~~~~不懂
  • 惰性，即只有条件为真的时候才会渲染条件块
  • 更高的切换开销
  • 如果运行时条件很少改变，则使用

(2)v-show

  • 不管初始条件是什么，元素总是会被渲染，简单的基于css进行切换
  • 更高的初始渲染开销
  • 如果需要非常频繁的切换，则使用

4.v-if与v-for一起使用

v-for的优先级高于v-if

二、列表渲染

1.用v-for把一个数组对应为一组元素

在v-for块中，拥有对父作用域属性的完全访问权限

(1) item in items或者item of items

items代表数组

item代表数组里面的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in items">
                {{ item.name }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    {name: 'yangjiao'},
                    {name: 'lp'}
                ]
            }
        })

    </script>
</body>
</html>

(2) (item, index) in items或者(item, index) of items

items代表数组

item代表数组里面的元素

index代表数组里面的元素的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in items">
                {{ index }} - {{ item.name }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    {name: 'yangjiao'},
                    {name: 'lp'}
                ]
            }
        })

    </script>
</body>
</html>

2.一个对象的v-for

通过一个对象的属性来迭代

(1) value in object

value代表对象的键值

object代表对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="value in object">
                {{ value }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                object: {
                    Name: 'yangjiao',
                    age: 24
                }
            }
        })

    </script>
</body>
</html>

(2) (value, key) in object

value代表对象的键值

key代表对象的键名

object代表对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value, key) in object">
                {{ key }} : {{ value }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                object: {
                    Name: 'yangjiao',
                    age: 24
                }
            }
        })

    </script>
</body>
</html>

(3) (value, key, index) in object

value代表对象的键值

key代表对象的键名

index代表对象中键的索引

object代表对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }} - {{ key }} : {{ value }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                object: {
                    Name: 'yangjiao',
                    age: 24
                }
            }
        })

    </script>
</body>
</html>

3.key~~~~~~~~~~~~~~~~~~~~~~~~不太懂

唯一的key值：给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素 用v-bind绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in items" v-bind:key="item.id">
                {{ index }} - {{ item.name }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    {id: 'yj', name: 'yangjiao'},
                    {id: 'lp', name: 'lupeng'}
                ]
            }
        })

    </script>
</body>
</html>

4.数组更新检测

(1)变异方法----改变原数组，对数组进行一些操作

  • push()~~~压入栈 先进后出
  • pop()~~~弹出栈
  • shift()~~~删除队列元素 后进先出
  • unshift()~~~加入队列元素
  • splice()~~~截取数组
  • sort()~~~排序
  • reverse()~~~倒序

(2)替换数组----不会改变原数组，总是返回一个新数组

  • filter()~~~过滤
  • concat()~~~连接两个数组
  • slice()~~~截取

(3)注意事项~~~~~~~~~~~~~~~~~~~略略略

5.对象更改检测注意事项

对于已经创建的实例，向嵌套对象添加响应式属性

(1)使用Vue.set(object, key, value)向嵌套对象添加响应式属性

(2)使用vm.$set(object, key, value)向嵌套对象添加响应式属性

(3)为已有对象赋予多个新属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>
            {{ users.name }}
        </h1>
        <h2>
            {{ users.age }}
        </h2>
        <h3>
            {{ users.gender }}
        </h3>
        <h2>
            {{ users.love }}
        </h2>
        <h3>
            {{ users.friend }}
        </h3>

    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                users: {
                    name: 'yangjiao'
                }
            }
        });
        // 使用Vue.set(object, key, value)向嵌套对象添加响应式属性
        Vue.set(vm.users, 'age', 24);
        // 使用vm.$set(object, key, value)向嵌套对象添加响应式属性
        vm.$set(vm.users, 'gender', '女');
        // 为已有对象赋予多个新属性
        vm.users = Object.assign({}, this.users, {
            love: 'lp',
            friend: 'lz'
        })

    </script>
</body>
</html>

6.显示过滤/排序结果

(1)使用计算属性

显示一个数组的过滤或排序副本，而不实际改变或重置原始数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="n in Num">
                {{ n }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
               numbers: [1,2,3,4,5,6]
            },
            computed: {
                Num: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        });

    </script>
</body>
</html>

(2)使用methods方法

不适用计算属性的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="n in Num(numbers)">
                {{ n }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
               numbers: [1,2,3,4,5,6]
            },
            methods: {
                Num: function (numbers) {
                    return numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        });

    </script>
</body>
</html>

7.一段取值范围的v-for

取整数:重复多次模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="n in 10">
                {{ n }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app'
        });

    </script>
</body>
</html>

8.v-for on a <template>

渲染多个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <template v-for="(item, index) in items">
                <li>
                    {{ item.msg }}
                </li>
                <li class="divider">
                    ---------------
                </li>
                <li>
                    {{ index }}
                </li>
            </template>

        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    {msg: 'YJ'},
                    {msg: 'LP'}
                ]
            }
        });

    </script>
</body>
</html>

9.v-for with v-if

(1)处在同一级别的时候，v-for的优先级高于v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in items" v-if="index > 1">
                {{ item.msg }}
            </li>
        </ul>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    {msg: 'YJ'},
                    {msg: 'LP'},
                    {msg: 'Hello'},
                    {msg: 'World'}
                ]
            }
        });

    </script>
</body>
</html>

(2)v-if在v-for外边,有条件的跳过循环的执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul v-if="items.length<0">
            <li v-for="item in items" >
                {{ item.msg }}
            </li>
        </ul>
        <p v-else>
            NONONO
        </p>
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    {msg: 'YJ'},
                    {msg: 'LP'},
                    {msg: 'Hello'},
                    {msg: 'World'}
                ]
            }
        });

    </script>
</body>
</html>

10.一个组件的v-for~~~~~~~~~~~~~~~~~~~~~~~跳过，后面细看

转载于:https://my.oschina.net/yj1993/blog/1577789

weixin_34163553
关注
vue学习笔记---(3)条件渲染(v-if && v-show)以及列表渲染(v-for)
Tomcat20的博客
10-19 883
条件渲染 列表渲染 v-if v-for v-show key
Vue条件渲染v-if，v-show和列表渲染v-for
YoungMan_09的博客
12-19 444
简述Vue条件渲染v-if，v-show和列表渲染v-for以及需要注意的地方
Vue 入门基础使用
chenfairy的博客
01-25 822
详细内容可以到 vue官方文档 查看 1.data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔 这个双大括号的语法叫做mustache语法，大括号里面的是作为变量形式出现的。 <template> <div> <p>data里面显示{{msg}}</p> </div> &lt...
在使用el-table-column的时候，发现v-show不会起作用
qq_35440907的博客
04-20 3809
<el-table-column v-if="editType === 'final_leader'" prop="final_leader" label="管理合伙人确认" header-align="center" align="center" width="200"> <template> <el-table-column v-for="(single, index) of selfData" :label="s...
.el-divider 样式
qq_43780814的博客
12-29 1万+
el-divider(content-position="left") span(style="color: #409EFF;font-weight: bold;") 基本信息 .el-divider { background-color: #b6d7fb; height: 2px; } el-divider(content-position="left") 基本信息 .el-divider { b...
Viewer.js的使用
热门推荐
神奇的酱油的博客
09-29 11万+
viewer.js GitHub地址：https://github.com/fengyuanchen/viewerjs https://github.com/fengyuanchen/viewer 两个版本的使用方式不完全相同； 尽管作者已经将使用方法都列出了（https://github.com/fengyuanchen/viewerjs#table-of-contents），但还是记录一...
vue小圆图遍历换行并只显示前9个
chaosama的博客
07-25 1208
先看效果 记得带key，虽然提升不大，但是至少警告栏少了 <template> <div class="service-class p30"> <div class="sc-list"> <div class="sc-item" v-for="(img,index) in images" :key="img.id" v-...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
总结来说，通过`v-for`指令结合`v-if`或`v-show`，我们可以轻松地根据数据动态控制列表元素的显示与隐藏。同时，通过正确处理事件绑定，我们可以确保事件仅在当前列表元素上触发，避免了事件冒泡的影响。这在实际...
Vue.js使用v-show和v-if的注意事项
10-20
在使用Vue.js进行Web开发时，v-show和v-if是两个常用的条件渲染指令，它们都能够实现根据条件来显示或隐藏DOM元素，但它们之间存在一些区别和使用上的注意事项，这一点对于提高应用程序的性能和用户体验至关重要。...
Vue.js03之常用标签v-for,v-if,v-show
autumn_leaf blog
03-30 1706
相信大家看了我的前面两次博客关于Vue.js相关的讲解之后，应该对Vue.js了解了一些基础知识了。本次将会继续讲解Vue.js常用的指令v-for,v-if和v-show。 v-for 我们用 v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in items形式的特殊语法，item是源数据数组并且item是数组元素迭代的别名。 接下来我们上一段代码进行详细的...
element-ui中的el-tab-pane标签使用v-show无效，不能隐藏的原因
wjw_de_java的博客
11-23 1899
解决的方法：把v-show换为v-if就OK了 失效原因：https://www.yht7.com/news/109286
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
代码哈士奇的博客
03-19 2718
你好呀
vue 强制组件重新渲染（重置）
全栈开发者的博客
11-26 2133
数据通过异步操作后，对之前刚加载的数据进行变更后，发现数据不能生效，此时可以使用强制刷新，方案有很多，在此举例三种方案 方案一 : key值法（官方推荐，具体移步至官网） 原理：key值变化之后，会自动重新渲染组件 <template> <my-index :key="key"/> </template> <script> export default{ data(){ return { .
在vue中使用el-tab-pane v-show无效原因
吴冬雪的博客
09-09 1867
补充知识：element ui中table的v-show失效，但是v-if正常 v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效
element-ui中分割线＜el-divider＞标签修改间距与虚线样式
qq_36697196的博客
12-11 3万+
<template> <div style="margin-left:5%;margin-right:5%;"> <el-row> <div style="height:200px"> </div> </el-row> <el-row> <span>已训练完毕，聚类分为5组</span> <
vue之v-show和v-if的使用场景以及开发使用遇到的坑！
海贼王某人的博客
01-26 680
先来说一下v-show和v-if最本质的区别，v-if是直接销毁DOM,从虚拟树直接移除，需要的时候在创建从新挂载，而v-show是通过css样式display：none来隐藏与显示DOM，使用场景就是需要频繁的切换显示和隐藏的话优先v-show,如果模板调用比较少，则可以选v-if,道理不必多说，频繁的创建移除dom肯定有损性能，不经常调用就在关闭的时候销毁，这样也可以减少dom树，提高性能。 开发中遇到的坑： 1.如果你使用的模板用prop传了参数，建议使用v-show,我今天就遇到了这个问题，用v-i
element-ui 通过v-show去显示和隐藏tabs的pane
u013379933的博客
08-12 2万+
通过v-if去控制tabs的pane显示和隐藏，会赞成数据无法保留，因为v-if会销毁组件，再重新创建。 我这里是通过设置选项卡的显示和隐藏（控制display）来做到的 // watch监听 watch: { 'ruleForm.isbrand' : { // 监听ruleForm的isbrand(是否品牌)被选中了 handler (newVal, oldV...
vue element Table 多选框实现所选行显示与回显（带分页）
weixin_49376462的博客
07-02 6122
element-ui table表格多选框状态与其他显示页面绑定，互相都可以改变对方的状态。分页之后的数据也可以显示保留之前的状态。
Vuejs——（4）v-if、v-for
qq20004604的博客
09-01 3688
（二十）v-if ①标准v-if用法 简单来说，该值为true则显示该标签，为false则不显示； 如例： {{abc.a}} var vm = new Vue({ el: '#app', data: { abc: { a: "1" } }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值