vue--显示和隐藏

一、v-if

判断通常是对用户行为的判断

用js来控制，则是使用if语句进行判断，而vue也提供了一个类似if语句的指令——v-if实现条件判断

首先在数据项里设置变量

 data() {
     return {
         content: "喵喵喵",
         play: true
     }
 }

通过控制play的值就可以实现元素隐藏与显示

在html文件中是这样写的：

<template>
     <div id="root">
         <div v-if="play">{
 { content }}</div>
         <div class="button" @click="toggle">toggle</div>
     </div>
</template>