《跟热饭一起学习vue吧》Part.5 指令

指令 v-

问：这东西是干嘛的？答：这东西是vue自己加的特殊的一种元素属性。可以监控自己的值是否变化 来决定一些特殊事件。

问：这东西怎么用？答：跟元素的其他属性如 id,name 等一样，都写在标签内即可。

属性都是以v-开头，我们今天只学习一个属性，叫v-if

v-if是控制元素是否显示的一个属性，如果它的值为真，那么元素就显示，如果值为假，那么就不显示。

比如这个元素，v-if的值是true时，它就显示

<p v-if=true>现在你看到我了</p>

当v-if 的值为false时候，它就隐藏。

<p v-if=false>现在你看不到我了</p>

那么这个值，是要写成布尔，还是写成字符串呢？经过实际测试发现，写成什么都可以，这就是vue的容错性。如下图，这俩种写法都是可以显示的。

<p v-if=true>现在你看到我了</p>
<p v-if="true">现在你看到我了</p>

那么这个v-if作用的范围有多大呢？答案是它可以隐藏、显示 当前标签和内部一切子标签。

如下图所示，整个template标签和内部的h1,p都会被控制，一起显示或者一起隐藏

<template v-if="true">
  <h1>菜鸟教程</h1>
  <p>学的不仅是技术，更是梦想！</p>
  <p>哈哈哈，打字辛苦啊！！！</p>
</template>

里面的值可以写成变量么，然后变量放在vue构造器的data中？答案是 ：当然可以。

而且变量名仍然 写不写双引号都可以。

好了本节课就到这里，怎么样，是不是感觉很简单？？？