博客地址 ：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. Dockerfile Tomcat镜像制作

    FROM centos MAINTAINER taohaijun "thjtao@126.com" WORKDIR /home #上传安装包 COPY jdk-8u131-linu ...

  2. Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器

    MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...

  3. Linux远程管理Windows程序Rdesktop详解

    #rpm –q rdesktop                       //查找是否已经安装 #yum install rdesktop                //使用yum安装 rde ...

  4. UvaLive1347

    Programming contests became so popular in the year 2397 that the governor of New Earck — the largest ...

  5. 洛谷 1083 (NOIp2012) 借教室——标记永久化线段树 / 差分+二分

    题目:https://www.luogu.org/problemnew/show/P1083 听说线段树不标记永久化会T一个点. 注意mn记录的是本层以下.带上标记的min! #include< ...

  6. Mac上的包管理器Homebrew的介绍及安装和使用实践

    Homebrew的作用 Homebrew是OS X上强大的包管理器,为系统软件提供了非常方便的安装方式,独特式的解决了包的依赖问题,并不再需要烦人的sudo,一键式编译,无参数困扰. 如何安装Home ...

  7. HDU 1536 求解SG函数

    #include<stdio.h> #include<string.h> #include<algorithm> #include<set> using ...

  8. windows10 中微信（UWP）版本不显示通知消息

    前言: 前段时间笔者更换了升级了WINDOWS10系统,从应用商店安装微信后,使用期间不会推送消息通知,右下角的通知栏也无法添加微信图标.搜索百度和Google后,发现很多人都是这样,这是微信(UWP ...

  9. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  10. 移动端以及 PC浏览器页面分享到朋友圈等的功能实现

    我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...