下面是针对“对vue中v-if的常见使用方法详解”的完整攻略，包含两个示例说明。

对vue中v-if的常见使用方法详解

v-if的基本使用方法

在Vue.js中，v-if指令用于控制元素是否显示。如果v-if表达式的值为true，元素将被渲染；如果v-if表达式的值为false，元素将不会被渲染。

<template>
  <div>
    <p v-if="show">
      这里是需要显示的元素
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

在上面的示例中，用v-if控制了p元素的显示和隐藏。因为初始的show值为true，所以p元素会被渲染出来。如果将show的值改为false，则p元素会被隐藏起来。

v-if与v-else的联合使用方法

v-if指令也可以和v-else指令配合使用，用于切换两个元素之间的显示和隐藏。

<template>
  <div>
    <div v-if="show">
      这里是需要显示的第一个元素
    </div>
    <div v-else>
      这里是需要显示的第二个元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

在上面的示例中，用v-if控制了两个div元素之间的切换。因为初始的show值为true，所以第一个div元素会被渲染出来。如果将show的值改为false，则第二个div元素会被渲染出来。

v-if与v-else-if的联合使用方法

在相似的情况下，v-if指令也可以和v-else-if指令配合使用，用于切换多个元素之间的显示和隐藏。

<template>
  <div>
    <div v-if="flag === 'first'">
      这里是需要显示的第一个元素
    </div>
    <div v-else-if="flag === 'second'">
      这里是需要显示的第二个元素
    </div>
    <div v-else>
      这里是需要显示的默认元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 'first'
    }
  }
}
</script>

在上面的示例中，用v-if和v-else-if控制了三个div元素之间的切换。因为初始的flag值为'first'，所以第一个div元素会被渲染出来。如果将flag的值改为'second'，则第二个div元素会被渲染出来；如果将flag的值改为其它的值，则第三个div元素会被渲染出来。

示例一

<template>
  <div>
    <h2 v-if="isLogin">
      欢迎您，{{username}}！
    </h2>
    <h2 v-else>
      您还未登录
    </h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      username: 'VueFans'
    }
  }
}
</script>

在上面的示例中，用v-if和v-else控制了两个h2元素之间的切换。如果用户已经登录，isLogin值为true，那么第一个h2元素会被渲染出来，显示欢迎语和用户名。如果用户还未登录，isLogin值为false，那么第二个h2元素会被渲染出来，显示"您还未登录"。

示例二

<template>
  <div>
    <div v-if="status === 'success'">
      <p>恭喜您，您的操作已成功！</p>
      <button @click="refreshPage">刷新页面</button>
    </div>
    <div v-else-if="status === 'warning'">
      <p>注意，您还未输入相关信息！</p>
      <button @click="resetForm">重置表单</button>
    </div>
    <div v-else>
      <p>很抱歉，操作失败，请重试！</p>
      <button @click="retry">重新尝试</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'success'
    }
  },
  methods: {
    refreshPage() {
      window.location.reload()
    },
    resetForm() {
      // 重置表单代码
    },
    retry() {
      // 重新尝试代码
    }
  }
}
</script>

在上面的示例中，用v-if、v-else-if和v-else控制了三个div元素之间的切换，用于展示用户操作的结果。如果用户的操作成功，status值为'success'，那么第一个div元素会被渲染出来，展示恭喜语和刷新页面按钮。如果用户的操作需要输入相关信息，status值为'warning'，那么第二个div元素会被渲染出来，展示注意语和重置表单按钮。如果用户的操作失败，那么第三个div元素会被渲染出来，展示抱歉语和重新尝试按钮。