博客地址 :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. iostat统计信息

    用途:报告中央处理器(CPU)统计信息和整个系统.适配器.tty 设备.磁盘和 CD-ROM 的输入/输出统计信息. 语法:iostat [ -c | -d ] [ -k ] [ -t | -m ] ...

  2. 洛谷 USACO P2207 Photo

    P2207 Photo 题目描述 Framer Jhon 打算给他的N头奶牛照相,( 2 <= N <= 1 000 000 000) . 他们排成一条线,并且依次取1~N作为编号. 每一 ...

  3. Win7系统中wmiprvse.exe占用CPU高如何解决

    该进程的详细路径是在:C:\WINDOWS\System32\Wbem  我们可以在任务管理器中“wmiprvse.exe”进程上单击右键,选择“打开文件位置”即可看到,如果该文件不在该文件夹中,那么 ...

  4. Spring Boot 数据库连接池参数

    挑战A.I.,赢百万奖金......了解更多详情>>> Tomcat JDBC 连接池 Spring Boot 默认选择 Tomcat JDBC Pool 作为数据库连接池.Tomc ...

  5. php各种字符串截取

    各种字符串截取.php <?php /** * 字符串截取,支持中文和其他编码 * @param [string] $str [字符串] * @param integer $start [起始位 ...

  6. VLSM(可变长子网掩码)

    http://blog.sina.com.cn/s/blog_635e1a9e0100yk51.html(转载) VLSM的介绍: VLSM(VLSM(Variable Length Subnetwo ...

  7. Webpack ERROR in Path must be a string. Received undefined

    在学习webpack过程中,我遇到的下面这个问题及解决方法. 问题如下: node版本如下截图: package.json文件截图: webpack.config.js文件截图: 然后,我运行项目,报 ...

  8. 【SPOJ 220】 PHRASES - Relevant Phrases of Annihilation

    [链接]h在这里写链接 [题意]     给你n(n<=10)个字符串.     每个字符串长度最大为1e4;     问你能不能找到一个子串.     使得这个子串,在每个字符串里面都不想交出 ...

  9. 原生js分页

    <html> <head> <meta charset='utf-8'> <style type="text/css"> #idDa ...

  10. python 在init方法中导入数据