vue3——vue数据循环渲染

博客地址 ：https://www.cnblogs.com/sandraryan/

vue循环渲染

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>循环渲染数组</h2>
        <span v-for="item in list">{{item}}</span>
        <!--    循环创建（顺便一起创建了里面的元素）-->
        <div v-for='item in goodlist'>
            <!-- : 绑定在属性之前，不加正常属性，加上属性值会被当作代码解析-->
            <img :src='item.img' alt="">
            <span>{{item.name}}</span>
            <mark>{{item.price}}</mark>
        </div>
        <hr>
        <h2>渲染数组并拿到下标</h2>
        <div v-for='(item,index) in list'>
            {{item}}-----{{index}}
            {{item}}-----{{index}}
            {{item}}-----{{index}}
            {{item}}-----{{index}}
        </div>
        <h2>循环渲染对象</h2>
        <hr>
        <div v-for='(val,key,index) in obj'>
            {{key}} ----{{val}}----{{index}}
        </div>
        <h2>循环 string</h2>
        <div v-for='item in str'>{{item}}</div>
        <div v-for='(item,i) in str'>{{i}}---{{item}}</div>
        <hr>
        <h3>指定循环次数</h3>
        <span v-for='i in 5'>{{i}}</span>
        <span v-for='(index,i) in 5'>{{i}}--{{index}}</span>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.0.1/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                str: 'hello world',
                obj: {
                    name: 'jack',
                    age: 20,
                    sex: 'male'
                },
                list: ['1', '2', '3', '4'],
                goodlist: [{
                    img: 'img/1.png',
                    name: 'girl',
                    price: 900
                }, {
                    img: 'img/2.png',
                    name: 'boy',
                    price: 400
                }, {
                    img: 'img/3.png',
                    name: "www",
                    price: 200

                }]
            }
        });
    </script>
</body>
</html>