vue的分支及循环结构

最新推荐文章于 2023-05-06 09:39:44 发布

hi__web

最新推荐文章于 2023-05-06 09:39:44 发布

阅读量207

点赞数

分类专栏： web之Vue 文章标签： vue 前端经验分享

本文链接：https://blog.csdn.net/hi__web/article/details/107128280

版权

web之Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

您可以在编辑器中c,v以下内容,即可查看(vue文件请自行到官网下载)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 分支v-if条件不满足不会渲染dom -->
        <div>
            <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>比较差</div>
            <hr>
            <!-- v-show条件不满足也会渲染dom只是把内容隐藏了 -->
            <div v-show="flag">测试v-show</div>
            <button @click="hide">点击隐藏</button>
        </div> 
        <hr>
        <!-- 循环数组 -->
        <div>
            <!-- 循环数组ietm每项内容,index索引 ,只写一个可以吧()去掉 key区分元素提高性能-->
            <div :key="index" v-for="(ietm,index) in fruits">{{ietm}} </div>
        </div>
        <hr>
        <!-- 循环对象 v:值,k名,i索引-->
        <div>
            <div v-for="(v,k,i) in obj">{{v}}</div>
        </div>
        <hr>
        <!-- 结合使用 -->
        <div v-if="v==12" v-for="(v,k,i) in obj2">{{v}}</div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            // 实例挂载位置
            el: '#app',
            // 实例所需数据
            data: {
                score: 90,
                flag: true,
                fruits: ['apple', 'orange', 'banana'],
                obj: {
                    a: '小明',
                    b: 'uzi',
                    c: 'mlxg'
                },
                obj2: {
                    a: '小明',
                    b: 'uzi',
                    c: 'mlxg',
                    d: 12
                }
            },
            methods: {
                hide: function() {
                    this.flag = !this.flag;
                }
            }
        })
    </script>
</body>

</html>