Vue入门笔记(二)--基础部分之条件渲染

github地址:https://github.com/iTao9354/basicVue/tree/master/conditional%20rendering(demo01-03)

一、v-if & v-else-if & v-else

  1.见下例:

    

    其中v-else必须紧跟在v-if或v-else-if后面。

    注意:v-else-if是2.1.0新增。

  2. 用属性key管理不需要复用的元素

   当两个元素是完全独立时,就不需要复用,此时只需添加一个具有唯一值的key属性即可。

    

二、v-show

v-show只能简单地切换元素的css属性display,既不支持<template>语法,也不支持v-else。

在控制元素是否显示时,与v-if的区别:

v-if的元素在条件为假时不会保留在DOM中,而v-show的元素在条件为假时始终会被渲染并保留在DOM中,只是display属性为none。

三、v-if vs v-show

  

四、v-if & v-for

详见列表渲染。

时间: 2024-10-27 09:20:28

Vue入门笔记(二)--基础部分之条件渲染的相关文章

Vue入门笔记#数据绑定语法

#数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) 实例:https://jsfiddle.net/miloer/035ase08/ #html <div id="app"> <input type="text" v-model="message"> <div>没

小程序基础11:条件渲染

1.条件渲染 wx:if 在框架中,我们使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块 <view wx:if="{{condition}}"> True </view> 也可以用 wx:elif 和 wx:else 来添加一个 else 块 <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif=&quo

Vue入门教程 第三篇 (条件与循环)

v-if语法(条件) 符合条件时显示(渲染)某一元素. 1 <div id="app"> 2 <div v-if="ok"> 3 <h1>title</h1> 4 </div> 5 6 <div v-if="type==1"> 7 <h1>title2</h1> 8 </div> 9 <div v-else-if="type

Vue入门笔记#过渡

Vue过渡,可以在元素从DOM中移除,插入时自动调用过渡效果.根据设定,会适时的触发过渡效果. 在使用的目标标签里添加 transition: <div transition="my_transition"></div> https://jsfiddle.net/miloer/n282tqwv/ 它还可以和v-if,v-show,v-for,动态组件一起使用. 官方对Vue过渡过程的讲解: 尝试以 ID "my-transition" 查找

Vue入门十二、路由的跳转

路由之间的跳转有再种:1.通过标签<router-link to='/login'>去登录</router-link>实现跳转2.通过js实现:this.$router.push({path:'/buy'})this.$router.replace({path:'/buy'})2.1push与replace的区别push会向history插入新记录replace不会插入history历史记录,如果返回上一页,则会跳转到上上一页中.上一页是不存在的返回上一页面:this.$route

Vue入门(二) 指令

v-once 执行一次性地插值,不更新 v-html 输出真正的 HTML v-bind  接受一个"参数",在指令后以冒号指明 e.g:id,disabled v-if  bool v-on 监听 DOM 事件 v-on:submit.prevent 修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定

nodeJs入门笔记(二)

js中window通常是全局变量 global 是node.js里的全局变量 node中能访问的对象一般都是 global的 属性 global 对象属性 process 用于描述当前Node 进程状态的对象,提供了一个与操作系统的简单接口. process.argv :命令行参数数组,第一个元素是 node,第二个元素是脚本文件名,从第三个元素开始每个元素是一个运行参数 console.log(process.argv); $ node argv.js 1991 name=byvoid --v

python笔记二 基础

10/24 对于Python,一切事物都是对象,对象基于类创建,对象所有的功能都是去类里面找的 变量名 = 对象 (值)                              重复的功能 创建一个类,然后对象去引用   整数 age = 18 print(type(age)) <class 'int'> 如果是其他的类型,会在下面显示类地址. age.__abs__() all_item = 95 pager = 10 result = all_item.__divmod__(10) pr

kettle入门笔记(二) 之 kettle报的坑爹错误:Error occured while trying to connect to the database

1 引言 在用kettle开发时常会出现 Error occured while trying to connect to the database 错误,但是仔细观察日志,引起这个错误的原因不尽相同.这个错误看起来很简单,但是有时候越简单的错误越没有耐心改,尤其是忙的时候,不小心填错了某个参数导致这个错误但是自己感觉没问题却跑不成功,这是最烦人的.这时候需要淡定.不妨上网查查,错误也许就可以愉快的解决了.下面给出这错误的更细节错误的不同发生情况. 2 示例 有个很简单的ktr脚本(当前kett