• vue3——vue数据循环渲染


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

    vue循环渲染

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div img {
                 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>

     

  • 相关阅读:
    swiper把左右箭头放到外侧
    vue复制地址栏链接:clipboard
    移动端适配rem.js
    vue登录弹框
    vue使用vue-aplayer(还用了SiriWave波形动画插件)
    vue 锚点定位,并平滑过渡
    vue引入scss报错:scss版本太高
    Kylin |3.Cube的优化
    Kylin |2.ModuleProject
    算法| 高级动态规划
  • 原文地址:https://www.cnblogs.com/sandraryan/p/12010139.html
Copyright © 2020-2023  润新知