（9）分支循环结构

最新推荐文章于 2022-06-23 19:28:47 发布

liuyang___

最新推荐文章于 2022-06-23 19:28:47 发布

阅读量73

点赞数

分类专栏： vue学习笔记文章标签： vue 前端

本文链接：https://blog.csdn.net/liuyang___/article/details/125135360

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、分支结构

v-if

v-else

v-else-if

v-show

2、v-if与v-show的区别

v-if控制元素是否渲染到页面

v-show控制元素是否显示（已经渲染到了页面）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="score>=90">优秀</div>
        <div v-else-if="score<90&&score>=80">良好</div>
        <div v-else-if="score<80&&score>60">一般</div>
        <div v-else-if="score<60">差</div>
        <div v-show="flag">测试v-show</div>
        <button v-on:click="handle">点击</button>
    </div>

<script>

    /*
    分支结构
    v-show的原理：控制元素样式是否显示 display：none
    */
    var vm = new Vue({
        el:'#app',
        data:{
            score:10,
            flag:false
        },
        methods:{
            handle:function(){
                this.flag=!this.flag;
            }
        }
        })
</script>
</body>

</html>

3、循环结构

v-for遍历数组

<li v-for="(item,index) in list">{{item}}+'-------'{{index}}</li>

key的作用：帮助Vue区分不同而元素，从而提高性能

<li :key = 'item.id' v-for="(item,index) in list">{{item}}+'----'{{index}}</li>