Vue模板和简单判断

Vue的核心是将数据显示在页面上，这一功能通过模板实现。为正常的HTML添加特殊的属性——被称作指令——借助它来告诉Vue我们想要实现的效果以及如何处理提供给它的数据。

1、下面我简单的创建一个模板样例

看代码不难理解，#app是指Id为app的div，其中data是div需要调用到的一些数据。v-if 通过逻辑判断显示数据（2false，1true），显示结果如图：
实际上我们可以简化代码设置data为一个属性，将判断逻辑放到界面

2、v-if 和v-show

在前面一节中知道了v-if指令可以控制一个元素的显示和隐藏，那么它是如何实现的？它和看起来很像的v-show指令有什么区别呢？

v-show指令比较一下，该指令使用CSS样式控制元素的显示/隐藏，通常在界面隐藏显示切换可用到。
但是如果data中值未定义时，v-show可能会报错。

模板中的循环

样例1

另外一个我经常使用的指令是v-for，这个指令通过遍历一个数组或者对象，将指令所在的元素循环输出到页面上。请看下面示例： 结果如图：

样例2

参数格式(value, key)

其他样例

v-bind属性绑定

有些指令，例如v-bind，可以接收参数。v-bind指令用于将一个值绑定到一个HTML属性上。例如，下面的这个例子将submit值绑定到按钮的type属性上 输出到文档中的内容如下所示：