博客地址 ：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>

vue3——vue数据循环渲染的更多相关文章

  1. Vue如何循环渲染图片

    Vue如何把服务器返回的图片数据渲染出来 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...

  2. vue如何循环渲染element-ui中table内容

    对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...

  3. vue数据已渲染成 但还是报错 变量 undefined

    问题:页面上的数据已渲染出来,但是控制台还是报错变量未undefined,主要是当页面加载完成后,数据并未加载完,所以会报次错误. 解决办法:在数据渲染的主节点(最外层的div)添加 v-if=“da ...

  4. vue input 循环渲染问题

    <li> <span>下属区县:</span> <div class="quxianList" v-for="(qx,index ...

  5. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  6. vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02

    一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...

  7. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  8. vue的v-for循环渲染列表时，解决没有:key警告问题（:key的作用）

    :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗. 当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出 ...

  9. Vue学习笔记（三）条件渲染和循环渲染

    目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...

随机推荐

  1. Oracle ORA-01861

    Oracle 插入时间时 报错:ORA-01861: 文字与格式字符串不匹配 的解决办法 解决方法:   这个错误一般出现在时间字段上,即你插入的时间格式和数据库现有的时间格式不一致,解决的方法是格式 ...

  2. 【并查集模板】 【洛谷P2978】 【USACO10JAN】下午茶时间

    P2978 [USACO10JAN]下午茶时间Tea Time 题目描述 N (1 <= N <= 1000) cows, conveniently numbered 1..N all a ...

  3. npm上面实用的第三方工具包

    npm上面实用的第三方工具包 live-server 作用:为页面提供实时刷新重载的功能,并且能提供一个http服务器 官方地址:https://www.npmjs.com/package/live- ...

  4. NOIP模拟 17.8.14

    NOIP模拟17.8.14 (天宇哥哥考察细心程度的题) [样例解释]如果删去第一个 1:在［3,1,2］中有 3 个不同的数如果删去 3:在［1,1,2］中有 2 个不同的数如果删去第二个 1:在［ ...

  5. 【水滴石穿】ReactNative-Redux-Thunk

    老实说,运行出来的项目让人失望,毕竟我想看各种有趣的demo啊- 先放上源码地址:https://github.com/ludejun/ReactNative-Redux-Thunk 我们来一起看看代 ...

  6. 在Liferay 7中如何自定义一个Portlet的toolbar

    哈哈,懒得自己写了,直接贴教程了,你想为那个portlet添加自定义的toolbar,就在javax.portlet.name=属性中写上它的值.教程博客:Adding Portlet URL in ...

  7. 云计算、大数据、编程语言学习指南下载，100+技术课程免费学！这份诚意满满的新年技术大礼包，你Get了吗？

    开发者认证.云学院.技术社群,更多精彩,尽在开发者会场 近年来,新技术发展迅速.互联网行业持续高速增长,平均薪资水平持续提升,互联网技术学习已俨然成为学生.在职人员都感兴趣的“业余项目”. 阿里云大学 ...

  8. 51nod1196 字符串的数量

    用N个不同的字符(编号1 - N),组成一个字符串,有如下要求:(1) 对于编号为i的字符,如果2 * i > n,则该字符可以作为结尾字符.如果不作为结尾字符而是中间的字符,则该字符后面可以接 ...

  9. Linux的登录和退出

    Linux是一个多用户的操作系统,用户要使用该系统,首先必须登录系统,使用完系统后,必须退出系统. 本章主要讨论登录和退出系统的方法: 用户登录系统时,为了使系统能够识别自己,必须输入用户名和密码,经 ...

  10. 【巨人的步伐以及人类的进击】BSGS algorithm

    原问题 求ax≡b(mod p)的最小正整数解. 解法 实际上是以空间换取时间的算法. 先用散列表把 ai (i∈[0,p√)) 都储存起来. 然后再从小到大枚举 j (j∈[0,p√)) ,在散列表 ...