VUE学习：vue基础08————VUE语法对内容处理：循环指令

最新推荐文章于 2023-01-18 16:47:44 发布

北凉冬

最新推荐文章于 2023-01-18 16:47:44 发布

阅读量128

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117171947

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

提示：
本文为VUE栏目：VUE学习：vue基础08————VUE语法对内容处理：循环指令

VUE学习：vue基础08————VUE语法对内容处理：循环指令

前言
循环指令

前言

本文继续学习VUE语法对内容的处理。

提示：以下是本篇文章正文内容，下面案例可供参考

循环指令

v-for指令

v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。使用起来类似于JavaScript的for-in循环。

v-for遍历数组

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <b v-for="a in arr">{{a}}</b>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            arr: ['a', 'b', 'c'],
        },
        methods: {
            
        }
    });
</script>
</html>

//abc

v-for遍历数组带下标

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <p v-for="(a,i) in arr">下标{{i}}的值是{{a}}</p>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            arr: ['a', 'b', 'c'],
        },
        methods: {}
    });
</script>
</html>

//下标0的值是a
//下标1的值是b
//下标2的值是c

v-for遍历对象

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <p v-for="o in obj">{{o}}</p>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            obj: {
                name: "张三",
                age: 18
            },
        },
        methods: {
            
        }
    });
</script>
</html>
//张三
//18

v-for遍历对象并获取key

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <p v-for="(v,k) in obj">
            key的值：{{k}},value的值：{{v}}
        </p>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            obj: {
                name: "张三",
                age: 18
            },
        },
        methods: {}
    });
</script>
</html>
//key的值：name,value的值：张三
//key的值：age,value的值：18

v-for遍历对象获取key和index

(尽量不要使用index参数,因为对象的key是无序的)

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <p v-for="(v,k,i) in obj">
            下标：{{i}}, key:{{k}},value:{{v}}
        </p>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            obj: {
                name: "张三",
                age: 18
            },
        },
        methods: {}
    });
</script>
</html>
//下标：0, key:name,value:张三
//下标：1, key:age,value:18

遍历字符串

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <i v-for="s in str">
            {{s}}
        </i>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            str: "hello world",
        },
        methods: {}
    });
</script>
</html>

v-for遍历整数

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <b v-for="n in num">{{n}}</b>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num: 10,
        },
        methods: {}
    });
</script>
</html>

v-for遍历常量

<html lang="zh-CN">
<body>
<div id="app">
    <!--    -->
    <i v-for="n in 20">{{n}}</i>
    <b v-for="s in 'kakarot'">{{s}}</b>
    <b v-for="s in [1,3,5,7,9]">{{s}}</b>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {}
    });
</script>
</html>
//1234567891011121314151617181920 kakarot 13579

v-for遍历复杂数组

<html lang="zh-CN">
<body>
<div id="app">
    <div>
        <p v-for="(stu,index) in stuList" :key="index">姓名：{{stu.name}}，年龄:{{stu.age}}</p>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            stuList: [{name: "张三丰", age: 120}, {name: "张无忌", age: 30}, {name: "周芷若", age: 8}]
        },
        methods: {}
    });
</script>
</html>

利用v-for实现tabs切换案例

<style>
    #app div{
        height: 200px;
        width: 200px;
        background-color: cyan;

    }
    .active{
        background-color: darkblue;
        color: #FFFFFF;
    }
</style>
<body>
<div id="app">
    <button type="button" v-for="i in len" :class="{active:i===index}" @click="tabs(i)">按钮{{i}}</button>
    <div v-for="i in len" v-if="i===index">
        内容{{i}}
    </div>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            len:3,
            index:1
        },
        methods:{
            tabs(i){
                this.index=i;
            }
        }


    });
</script>
</html>

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础08————VUE语法对内容处理：循环指令

提示：本文为VUE栏目：VUE学习：vue基础08————VUE语法对内容处理：循环指令VUE学习：vue基础08————VUE语法对内容处理：循环指令前言循环指令v-for指令v-for遍历数组v-for遍历数组带下标v-for遍历对象v-for遍历对象并获取keyv-for遍历对象获取key和index遍历字符串v-for遍历整数v-for遍历常量v-for遍历复杂数组利用v-for实现tabs切换案例前言本文继续学习VUE语法对内容的处理。提示：以下是本篇文章正文内容，下面案例可供参考
复制链接

扫一扫

专栏目录