通过vue控制切换一个元素的显示也相当简单:

<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})

继续在控制台设置 app3.seen = false,你会发现 “Now you see me” 消失了。

这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据。而且,Vue.js 也提供一个强大的过渡效果系统,可以在 Vue 插入/删除元素时自动应用过渡效果

也有一些其它指令,每个都有特殊的功能。例如, v-for 指令可以绑定数据到数组来渲染一个列表:

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})

运行结果如下:

在控制台里,输入 app4.todos.push({ text: 'New item' })。你会发现列表中多了一栏新内容。

vue条件与循环的更多相关文章

  1. Vue.js:条件与循环

    ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...

  2. Python基础之条件和循环

    阅读目录 一.if语句 1.1功能 1.2语法 1.2.1:单分支,单重条件判断 1.2.2:单分支,多重条件判断 1.2.3:if + else 1.2.4:多分支if + elif +else 1 ...

  3. linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例 --转载

    http://www.cnblogs.com/chengmo/archive/2010/10/14/1851434.html nux shell有一套自己的流程控制语句,其中包括条件语句(if),循环 ...

  4. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  5. Python基础(6)--条件、循环

    本文的主要内容是 Python 的条件和循环语句以及与它们相关的部分. 我们会深入探讨if, while, for以及与他们相搭配的else,elif,break,continue和pass语句. 本 ...

  6. Python核心编程读笔 7: 条件和循环

    第八章 条件和循环 一.if python中的条件表达式:很奇葩!!! smaller = (x < y and [x] or [y])[0] 或者: smaller = x if x < ...

  7. Python 2.7 学习笔记 条件与循环语句

    本文介绍下python条件和循环语句的语法 一.if条件语句 语法格式如下: if 表达式: .... elif 表达式: .... elif 表达式: .... else: ..... 说明:与其它 ...

  8. Beginning Python From Novice to Professional (5) - 条件与循环

    条件与循环 条件运行: name = raw_input('What is your name? ') if name.endswith('Gumby'): print 'Hello, Mr.Gumb ...

  9. python 语句:条件、循环、break、continue...

    1. 条件语句 执行条件:判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围. [Python程序语言指定任何非0和非空(null)值为true,0 或 ...

随机推荐

  1. C# 多进制转换

    public class Converter { private static String keys = "0123456789abcdefghijklmnopqrstuvwxyzABCD ...

  2. 你还在为无法完美卸载SQL Server 2008 R2而烦恼吗?

    你还在为无法完美卸载SQL Server 2008 R2而烦恼吗? 本文摘抄来自:http://blog.csdn.net/u013058618/article/details/50265961  小 ...

  3. 滑动CheckBox样式

    <Style x:Key="SliderCheckBox" TargetType="{x:Type CheckBox}"> <Setter P ...

  4. Mysql 创建用户并授权

    设置MySQL用户账号,指定哪个用户可以连接服务器,从哪里连接,连接后能做什么. MySQL管理员应该知道如何设置MySQL用户账号,指出哪个用户可以连接服务器,从哪里连接,连接后能做什么? GRAN ...

  5. 关于Gevent的使用指北

    关于Gevent的使用指北 只是看了入门指南,和一个翻译文档.写一下个人读书心得. 其实看完之后,第一个反映就是asyncio这个系统库,感觉gevent现在所做的一些事情是与asyncio很像的,但 ...

  6. centos 7 秘钥分发

    生成秘钥 [root@node1 ~]# ssh-keygen 查看秘钥 [root@node1 ~]# ls .ssh/id_rsa* .ssh/id_rsa .ssh/id_rsa.pub 将秘钥 ...

  7. Java基础-多线程-①线程的创建和启动

    简单阐释进程和线程 对于进程最直观的感受应该就是“windows任务管理器”中的进程管理: (计算机原理课上的记忆已经快要模糊了,简单理解一下):一个进程就是一个“执行中的程序”,是程序在计算机上的一 ...

  8. [leetcode]Decode Ways @ Python

    原题地址:https://oj.leetcode.com/problems/decode-ways/ 题意: A message containing letters from A-Z is bein ...

  9. KVM虚拟化管理 virt manager常用操作

    部分涉及到Linux.Nginx.tomcat.MySQL等的点滴操作记录,时间长了,就忘掉了,偶尔整理一下操作的history,就此简要备份一下: [原][BG]-一次虚拟化环境实践简要记录: ht ...

  10. 树莓派3中编译Opencv3.4.10

    一.命令 -dev libv4l-dev libavcodec-dev libavformat-dev libswscale-dev cd wget http://sourceforge.net/pr ...