-
2020-01-01 00:00
- 24
- 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的动画封装</title>
<link rel="stylesheet" href="./main.css">
<script src='./vue.js'></script>
<style>
.v-enter,.v-leave-to{
opacity:0
}
.v-enter-active,.v-leave-active{
transition: opacity 2s ease .1s
}
</style></head>
<body>
<h1>Vue中的动画封装</h1>
<hr>
<div id="app">
<fade :visible='visible'>
<div>16个欧洲国家签署首份《日内瓦公约》</div>
</fade>
<button @click='handleClick'>切换状态</button>
</div>
<script>
Vue.component('fade',{
props:['visible'],
template:`
<transition>
<slot v-if='visible'></slot>
</transition>
`
})
var vm = new Vue({
el:"#app",
data:{
visible:true,
},
methods:{
handleClick(){
console.log(55);
this.visible=!this.visible
}
}
})
</script></body>
</html>
代码如上 ，在<slot v-if='visible'></slot>代码中，slot插槽上定义v-show不生效，但是定义v-if却生效了，这是什么原因啊，求各位大佬释义，谢谢
- 共 0 条
- 全部回答
-
夜泊荆溪阻雪 普通会员 1楼
在Vue中，
v-if和v-show都是用于控制元素显示和隐藏的指令，但它们在某些场景下可能会导致v-show不生效。以下是一些可能导致v-show不生效的场景：- 当元素被多次动态挂载和卸载时：Vue的虚拟DOM（Virtual DOM）是一种缓存数据的方式，当DOM结构发生变化时，Vue会自动更新虚拟DOM。在某些情况下，当你多次动态挂载和卸载同一个元素时，虚拟DOM可能会被重置，导致原本设置的
v-if和v-show不会生效。
例如：
```html
```
在上述代码中，当
isShow为false时，v-if才会生效。当isShow为true时，v-if不会生效，因为v-if需要被绑定到一个实际的DOM元素上。- 当元素被挂载并移除时：Vue的虚拟DOM（Virtual DOM）会在元素挂载并移除时自动清理。当元素被移除时，它可能会与Vue的原生DOM结构不同，这可能导致
v-if和v-show不生效。
例如：
```html
```
在上述代码中，当
isShow为true时，v-if会生效。当isShow为false时，v-if不会生效，因为v-if需要被绑定到一个实际的DOM元素上。- 当
v-if与v-show作用于同一元素时：当v-if和v-show作用于同一个元素时，它们可能会产生冲突，导致v-show不生效。例如：
```html
隐藏```
在上述代码中，当
isShow为true时，v-if和v-show都会生效，因为v-if与v-show的作用于同一个元素。- 当
v-show是在循环中应用时：在Vue中，v-show是不能在循环中应用的，因为Vue使用v-if来代替<template>标签。在循环中，v-if会逐个执行，并在满足条件时执行对应的子组件渲染，这会导致v-show的执行顺序和实际显示效果不符。
例如：
```html
隐藏```
在上述代码中，
v-show只能在循环外部应用，不能在循环内部应用。当isShow为true时，v-if会触发循环内部的子组件渲染，而v-show不会被执行。因此，v-show在循环内部不生效。- 当
v-show被动态绑定到全局变量时：在Vue中，v-show只能在实际的DOM元素上应用，不能通过全局变量绑定。因此，当v-show被动态绑定到全局变量时，它不会生效。
例如：
```html
隐藏```
在上述代码中，当
isShow被动态绑定到全局变量myVar时，v-show不会生效，因为v-show只能在实际的DOM元素上应用。在Vue中，你可以通过动态绑定v-show到实际DOM元素上，但是myVar是全局变量，不支持v-if。 - 当元素被多次动态挂载和卸载时：Vue的虚拟DOM（Virtual DOM）是一种缓存数据的方式，当DOM结构发生变化时，Vue会自动更新虚拟DOM。在某些情况下，当你多次动态挂载和卸载同一个元素时，虚拟DOM可能会被重置，导致原本设置的
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部