指令进阶

v-show

切换元素的display效果

<p v-show="true">{{msg}}</p>
<p v-show="1 + 1 == 2">{{msg}}</p>

v-if

控制元素的渲染

<p v-if="num === 10">
  num的值是10
</p>

v-else

控制元素的渲染，必须队形`v-if`

<p v-if="num === 10">
  num的值是10
</p>
<p v-else>
  num不是10
</p>

v-for

遍历数组

<p v-for="item in arr">
  {{item}}
</p>

:

v-bind 的缩写

<p :style="{color: 'red'}">{{msg}}</p>

@

v-on 的缩写

<button type="button" @click="alertMsg">btn</button>