我有一个按钮，如果值大于 2，应该显示，所以我写了一个"v-if"条件。一切正常，但是当我添加工具提示时，当满足"v-if"条件时，该按钮不会再次出现。
下面是示例：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn @click="val++">+</v-btn>
<v-btn @click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="green" v-if="val > 2" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2" v-on="on">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>谁能给我一个线索，这里发生了什么？ 提前致谢
您应该将v-if指令放在v-tooltip元素而不是按钮上，或者在按钮上使用v-show而不是v-if。
按钮未显示的原因是按钮位于工具提示的slot中。使用v-if时，不会呈现按钮，因此插槽为空，强制工具提示组件使用默认的插槽内容。你不能重新填充一个空的插槽，至少在 Vuetify 中是这样。v-show工作是因为按钮仍呈现给 DOM，它只是隐藏的。
在工具提示上使用 V-IF：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn @click="val++">+</v-btn>
<v-btn @click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom v-if="val > 2">
<template v-slot:activator="{ on }">
<v-btn color="green" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>在按钮上使用 V-SHOW：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn @click="val++">+</v-btn>
<v-btn @click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="green" v-show="val > 2" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>