Vue2.0学习笔记一 :各种表达式

#,过滤器

#,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性;

#,过滤器可以串联 {{ message | filterA | filterB }}

#,条件渲染

#,注意v-if与v-show的区别,v-if是决定是否创建DOM,而v-show则是DOM始终存在,只是改变了显示样式;

#,如果要切换多个元素的时候,我们就使用<template v-if=‘ok‘>;

#,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。

#,列表渲染

#,<li v-for=‘item in items>{{item.message}}</li>,也可以用of 代替in,这种语法和JavaScript的语法更加接近;

#,和v-if类似,如果我们要渲染多个元素,则可以使用 <template v-for=‘item in items> <xxxx> < bbb> </tempate>

#,用v-for不但可以迭代数组,也可以迭代对象,然后item就表示对象的属性值,当然,也可以像下面这样获取到对象属性的key、value、index;

<ul>

<li v-for=‘(value, key, index) in person‘>

{{key}}, {{value}}, {{index}}

</ul>

#,还可以使用v-for迭代取整数;<span v-for="n in 10">{{ n }} </span>

#,可以在自定义组件中使用v-for,此时如果要把v-for的item值传递给子组件,需要用到子组件的prop属性;

#,为了提高在items变化时v-for的渲染效率,我们最好给元素指定一个key,例如:

<div v-for="item in items" :key="item.id">

  <!-- 内容 -->

</div>

来自为知笔记(Wiz)

时间: 2024-10-12 16:30:39

Vue2.0学习笔记一 :各种表达式的相关文章

vue2.0学习笔记之生命周期

beforeCreate 组件实例刚刚被创建,属性都没有 created  实例已经创建完成,属性已经绑定 beforeMount 模板编译之前 mounted 模板编译之后,代替之前ready beforeUpdate        组件更新之前 updated                 组件更新完毕 beforeDestroy       组件销毁前 destroyed              组件销毁后 <!DOCTYPE html> <html lang="en

vue2.0学习笔记之自定义组件

step one:    推荐结构 step two:    Loading.vue <template> <h3>{{msg}}</h3> </template> <script> export default { data(){ return { msg: "loading" } } } </script> <style scoped> h3 { color: #699; } </style&

vue2.0学习笔记之组件

[易错点]:  1.   组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2.   组件名称采用横杠间隔命名时,第一个字母大写会报错. 写法一:全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

vue2.0学习笔记之webpack-simple模板中的路由简单配置案例

以下是完成后的目录结构 案例基础是已经用 webpack+vue-cli 创建了一个名为 vue_router的工程 , 并安装了vue-router 1.  定义组件 1.1 先在 src 目录下创建组件文件夹 components , 添加两个文件Home.vue 和 News.vue, 代码如下: Home.vue   (推荐首字母大写) <template> <h3>主页</h3> </template> News.vue <template&

Swift 2.0学习笔记(Day 9)——离开表达式你试试!

Swift 2.0学习笔记(Day 9)--离开表达式你试试! 原创文章,欢迎转载.转载请注明:关东升的博客   表达式啊是很重要地. 在Swift中,表达式有3种形式. l  不指定数据类型 var a1 = 10 l  指定数据类型 var a1:Int  = 10 l  使用分号 var a1:Int = 10; vara2:Int = 20 在Swift语言中,一条语句结束后可以不加分号也可以添加分号,但是有一种情况必须要用分号,那就是多条语句写在一行的时候,需要通过分号来区别语句. 例

S?wift 2.0学习笔记(Day 9)——离开表达式你试试!

Swift 2.0学习笔记(Day 9)--离开表达式你试试!  原创文章,欢迎转载.转载请注明:关东升的博客             表达式啊是很重要地. 在Swift中,表达式有3种形式. 不指定数据类型 var a1 = 10 指定数据类型 var a1:Int  = 10 使用分号 var a1:Int = 10; var a2:Int = 20 在Swift语言中,一条语句结束后可以不加分号也可以添加分号,但是有一种情况必须要用分号,那就是多条语句写在一行的时候,需要通过分号来区别语句

一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移

不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.supervisor.mysql环境搭建搭建好了.net core linux的相关环境,今天就来说说ef core相关的配置及迁移: 简介: Entity Framework(以下简称EF) 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,EF Core是Entity

Struts2学习笔记(OGNL表达式)

Struts2学习笔记(OGNL表达式) Struts 2支持以下几种表达式语言: OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言: JSTL(JSP Standard Tag Library),JSP 2.0集成的标准的表达式语言: Groovy,基于Java平台的动态语言,它具有时下比较流行的动态语言(如Python.Ruby和Smarttalk等)的一些起特性: Velocity,严格来说不是表达式语言,它是一种基于Ja

Swift 2.0学习笔记(Day5)——我所知道的标识符和关键字

Swift 2.0学习笔记(Day5)--我所知道的标识符和关键字   原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和关键字,一直没有好好的总结,就是这样的用着,现在小小的整理一下Swift中的标识符和关键字. 什么是标识符呢? 标识符就是给变量.常量.方法.函数.枚举.结构体.类.协议等由开发人员指定的名字. 其实,构成标识符的字母是有一定规范的,Swift中命名规则是: 区分大小写,Myname与myname是两个不同的标识符: 标识符首字符可以以下划线(_)或者字