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>
vue3——vue数据循环渲染的更多相关文章
- Vue如何循环渲染图片
Vue如何把服务器返回的图片数据渲染出来 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...
- vue如何循环渲染element-ui中table内容
对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...
- vue数据已渲染成 但还是报错 变量 undefined
问题:页面上的数据已渲染出来,但是控制台还是报错变量未undefined,主要是当页面加载完成后,数据并未加载完,所以会报次错误. 解决办法:在数据渲染的主节点(最外层的div)添加 v-if=“da ...
- vue input 循环渲染问题
<li> <span>下属区县:</span> <div class="quxianList" v-for="(qx,index ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02
一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)
:key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗. 当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出 ...
- Vue学习笔记(三)条件渲染和循环渲染
目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...
随机推荐
- Dockerfile Tomcat镜像制作
FROM centos MAINTAINER taohaijun "thjtao@126.com" WORKDIR /home #上传安装包 COPY jdk-8u131-linu ...
- Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器
MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...
- Linux远程管理Windows程序Rdesktop详解
#rpm –q rdesktop //查找是否已经安装 #yum install rdesktop //使用yum安装 rde ...
- UvaLive1347
Programming contests became so popular in the year 2397 that the governor of New Earck — the largest ...
- 洛谷 1083 (NOIp2012) 借教室——标记永久化线段树 / 差分+二分
题目:https://www.luogu.org/problemnew/show/P1083 听说线段树不标记永久化会T一个点. 注意mn记录的是本层以下.带上标记的min! #include< ...
- Mac上的包管理器Homebrew的介绍及安装和使用实践
Homebrew的作用 Homebrew是OS X上强大的包管理器,为系统软件提供了非常方便的安装方式,独特式的解决了包的依赖问题,并不再需要烦人的sudo,一键式编译,无参数困扰. 如何安装Home ...
- HDU 1536 求解SG函数
#include<stdio.h> #include<string.h> #include<algorithm> #include<set> using ...
- windows10 中微信(UWP)版本不显示通知消息
前言: 前段时间笔者更换了升级了WINDOWS10系统,从应用商店安装微信后,使用期间不会推送消息通知,右下角的通知栏也无法添加微信图标.搜索百度和Google后,发现很多人都是这样,这是微信(UWP ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- 移动端以及 PC浏览器页面分享到朋友圈等的功能实现
我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...