20190220 vue第三课

一、显示状态切换的两种方式：
1、v-if ：优势：减少内存占用；劣势：重新加载用时长。
2、v-show：优势：重新加载用时短；劣势：不减少内存的占用。
两者都可以切换显示状态，区别在于v-if是把整个模块清楚掉，而v-show则是把模块的style属性切换为不显示。
代码：

在这里，提前定义好了一个变量Isture，变量值为：false，在写一个单击事件，在单击是切换变量的值。
click事件代码：

在这里要注意一点“！”这种写法，只适用于真假值的切换，也就是ture和false的切换，不能用于字符串或者数值等变量。
前台效果：

在点击切换前，未显示任何内容；

在点击切换后，出发click事件后，内容显示。接下里看一下在未显示时网页前台代码部分；

在这里可以清楚的看到，在未显示时，v-if模块是不存在，也就是不占用内存，而v-show模块是存在的，只是在style里属性为不显示，当点击按钮，触发单击事件时，v-if需要重进加载模块，而v-show则只需修改属性为显示即可。

二、v-for循环显示：
v-for是循环显示，也就是把变量多个值依次显示出来，在这里结合ul、li进行示例；
代码：

在这里注意书写格式，array是定义好的变量，而item则是进行循环显示的中间变量，也就每次把array里的一个值给item，然后显示出来，重复这一动作，知道array里的所有值都显示出来为止。
前台效果：

这里可以看到虽然是想要的结果，但是并不是很整齐，为了达到更加整齐的效果，可以使用v-for的另一种用法，代码如下：

在这里可以看到，多加了一个index，书写格式也有所变化，而这里所用到的变量array2则是定义好的数组变量，代码如下：

index是序号，后面依次是数组值。
前台效果：

这次的效果看上去稍好一些，不过为了更加好的效果，可以把v-for和table结合，以达到更好的效果。
代码如下：

thead是每一列的列名，tr则是每一列的值。
前台效果：

三、字符串的拼接
在写程序过程中，经常会把两个字符串拼接在一起，形成一个新的字符串，这里共有三种方式：
1、直接拼接：
直接拼接就是直接把字符串拼在一起。代码如下：

2、函数方式：
函数方式，则是在函数内把字符串拼接起来，然后显示函数的返回值。代码如下：

这里要注意一点，因为是函数，所以函数后面的（）必须要写上。
函数代码：

3、计算属性：
计算属性，则是用计算属性，把字符串拼在一起，代码如下：

前台效果：

四、时间函数
在程序中添加时间函数，加上console.log可以在前台显示进入当前事件的时间，调试程序时，更加的准确。
代码如下：

前台效果：

可以看到，在控制台显示了进入事件的具体时间，刚加方便调试程序。