vue笔记-列表渲染
用v-for把一个数组对应为一组元素
使用方法:v-for="(item,index) in items"//也可以使用of替代in
{
items:源数组
item:数组元素迭代的别名
index:当前项的选项
}
<ul id="example-1">
<li v-for="item in items" :key="index">
{{ item.message }}
</li>
</ul>
一个对象的v-for
使用方法:v-for="(value,key,index) in object"
{
object:源对象
value:属性值
key:属性
index:索引
}
<div v-for="(value, key, index) in object" :key="key">
{{ index }}. {{ key }}: {{ value }}
</div>
数组更新检测
1:数组变异方法(push pop shift unshift splice sort reverse)会改变原数组
2:替换数组,对于一些不改变原数组,但是返回值是新数组的情况,可以用新数组替换原数组的方式
3:利用索引修改数组值,单纯修改数组的length属性都是不能被检测到的 对象更新检测
1:Vue 不能检测对象属性的添加或删除 解决办法
数组:通过实例的set动态添加属性or使用数组的splice方法
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue) 对象:通过实例的set动态添加属性
Vue.set(object, key, value)
//为已有对象添加多个属性,可以将两个对象合并成一个新的对象
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
通过v-for在一段范围取整数
<div>
<span v-for="n in 10">{{ n }} </span>
</div> 1 2 3 4 5 6 7 8 9 10
当v-for 与 v-if处在同一个节点 v-for的优先级将更高
使用场景:当后台返回一个医生列表,而你只想显示可预约时间的医生,你并不需要将返回数据进行单独处理;
vue笔记-列表渲染的更多相关文章
- vue基础——列表渲染
列表渲染 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据 ...
- 【03】Vue 之列表渲染及条件渲染
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- vue基础---列表渲染
首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...
- 一起学Vue之列表渲染
在Vue开发中,列表数据绑定非常简单易用,本文主要通过一些简单的小例子,讲述v-for的使用方法,仅供学习分享使用,如有不足之处,还请指正. 用 v-for 把一个数组对应为一组元素 我们可以用 v- ...
- 前端框架之Vue(6)-列表渲染
用v-for把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据数组并且 i ...
- vue之列表渲染
一.v-for循环用于数组 v-for 指令根据一组数组的选项列表进行渲染. 1.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组名, item 是数组元 ...
- VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move
本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- vue学习笔记(二)- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...
随机推荐
- python3 练手实例7 斐波那契数列
'''a,b=0,1 x=int(input('请指定需要多少项:')) while x>0: print(b) a,b=b,a+b x-=1''' #递归 def fibo(n): if n& ...
- json基础小结
定义:json是一种前后端数据传送的格式规定json对象,json字符串 (区别 json字符串是有json格式的字符串)1.创建(两中json结构,一种是对象,一种是数组)json对象:var ao ...
- 417 事件、监听、jQuery、轮播手动
am:通用事件 a链接事件阻止默认行为 return false HTML元素大都包含了自己的默认行为,例如:超链接.提交按钮等.我们可以通过在绑定事件中加上return false来阻止它的默认行为 ...
- important覆盖行内样式
优先级,外部样式<内部样式<行内样式,后台富文本编辑器编辑的正文显示在前台时可用!important覆盖其行内样式 今天的问题,font-family:"思源黑体 CN!impo ...
- 【译】索引进阶(十一):SQL SERVER中的索引碎片【上篇】
原文链接:传送门. 第十章节我们分析了索引的内部结构.有了这些关于索引结构的知识,我们便可以分析索引碎片了:其产生的原因,如何防止,以及何时可以不去关注它们. 一些背景知识 / 复习 以下知识对于理解 ...
- mac 安装和使用MongoDB
安装 尝试一:手动命令安装尝试二:采用Homebrew尝试三:下载安装包使用安装尝试一:手动命令安装按照官网https://docs.mongodb.com/manual/tutorial/insta ...
- ASP.NET Core 项目配置 ( Startup )(转载)
原文:https://www.twle.cn/l/yufei/aspnetcore/dotnet-aspnet-startup.html 由于是个人网站,怕没了,特意复制保存,个人觉得讲的非常透彻 前 ...
- 记录一下这几天遇到的坑(.netcore 代理问题)
1.通过图片的网络url将图片转化为base64格式 方法如下: public static async Task<string> GetImageAsBase64Url(string u ...
- 配置ssh无密码登陆Linux
Windows下面的话需要安装git,或者其他能执行shell命令的软件 1.首先要先修改SSH的配置文件 vi /etc/ssh/sshd_config#修改配置文件 #如果被#注释了,就取消#号, ...
- python中单例模式的四种实现方式
配置文件settings.py IP='100.0.0.2' PORT=3302 方式一:绑定给类的方法 class Mysql: __instance = None def __init__(sel ...