v-if指令和v-else-if和v-else (分支结构)和v-for

最新推荐文章于 2024-03-11 11:12:35 发布

沐浴前端

最新推荐文章于 2024-03-11 11:12:35 发布

阅读量1.4k

点赞数 1

分类专栏： Vue 文章标签： v-if指令和v-else指令 v-else-if指令 v-for指令 v-for为什么使用key? 为什么避免v-if和v-for在一起使用

本文链接：https://blog.csdn.net/weixin_44976833/article/details/102981883

版权

Vue 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

`v-if指令`

1.`v-if指令和v-else-if和v-else` (分支结构)

<body>
    <div id="app">
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score>60&&score<80'>一般</div>
        <div v-else>不合格</div>
        <!-- //v-show 控制元素样式是否显示 -->
        <div v-show='flag'>测试v-show</div>
        <button @click='handle'>点击</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                //通过改变score的值来判断是优秀,良好,一般,不合格
                score: 70,
                flag:true
            },
            methods:{
                handle:function(){
                    this.flag = !this.flag;
                }
            }
        })
    
    </script>
</body>

v-show和v-if区别

v-show本质就是标签display设置为none ,控制隐藏

v-show只编译一次,后面就是控制css,而v-if不停地销毁和创建,所以v-show性能更好点;

v-if是动态的向DOM树内部添加或者删除DOM元素

v-if切换有一个局部编译和卸载的过程,切换过程中合适的销毁和重建内部的事件监听和子组件;

2.`v-for指令` (循环结构)

用于循环的数组里面的值可以是对象,也可以是普通元素

<body>
    <div id="app">
        <div>水果列表</div>
        <ul>
            <li v-for='item in fruits'>{{item}}</li>
            <!-- 第一个参数item是每一项值 index 是索引 -->
            <li v-for='(item,index) in fruits'>{{item+'--------------'+index}}</li>
            <!-- 数组里边的数据是多个对象 -->
            <!-- key的作用:1.key来给每个节点做一个唯一标识 
                2.key的作用是为了高效的更新虚拟DOM  -->
            <li :key='item.id' v-for='(item,index) in myFruits'>
                <span>{{item.ename}}</span>
                <span>=================</span>
                <span>{{item.cname}}</span>
            </li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fruits: ['apple', 'orange', 'banana'],
                myFruits: [{
                    id: 1,
                    ename: 'apple',
                    cname: '🍎'
                }, {
                    id: 2,
                    ename: 'orange',
                    cname: '🍊'
                }, {
                    id: 1,
                    ename: 'banana',
                    cname: '🍌'
                }]
            }
        })
    </script>
</body>

2.1为什么避免`v-if`和`v-for`在一起使用

当Vue处理指令时,v-for比v-if具有更高的优先级,通过v-if移动到容器元素,不会再重复遍历列表中的每个值,取而代之的是我们检查它一次,而且不会在v-if为否的时候运算v-for

2.1 v-for为什么使用key?

key来给每个节点做一个唯一标识;

key的作用主要是为了更高效的更新虚拟DOM

由于vue在更新渲染DOM的时候是根据新旧DOM树进行对比,使用key来给每个节点做唯一标识,Diff算法就可以正确识别出此节点,找到正确的位置区插入新的节点;

沐浴前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
v-if指令和v-else-if和v-else (分支结构)和v-for

v-if指令1.v-if指令和v-else-if和v-else (分支结构)<body> <div id="app"> <div v-if='score>=90'>优秀</div> <div v-else-if='score<90&&score>=80'>良好&...
复制链接

扫一扫