黄子涵

多个元素的过渡

我们之后讨论多个组件的过渡，对于原生标签可以使用 v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>
<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多个元素的过渡</title>
  <script src="./vue.js"></script>
</head>
 
<body>
  <div id="hzh">
    <transition>
      <table v-if="items.length > 0">
        <caption>黄子涵</caption>
        <tr>
            <th>黄子涵是帅哥</th>
            <th>黄子涵是靓仔</th>
            <th>黄子涵真厉害</th>
            <th>黄子涵真聪明</th>
        </tr>
      </table>
      <p v-else>黄子涵没有发现项目</p>
    </transition>
  </div>
  <script>
    var VM = new Vue({
      el: '#hzh',
      data: {
        items: { 
          length: 1 
        }
      }
    })  
  </script>
</body>

image

可以这样使用，但是有一点需要注意：

警告

当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

示例：

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>
<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多个元素的过渡</title>
  <script src="./vue.js"></script>
</head>
 
<body>
  <div id="hzh">
    <transition>
      <button v-if="hzhEdit" key="hzh">
        黄子涵
      </button>
      <button v-else key="hcq">
        黄春钦
      </button>
    </transition>
  </div>
  <script>
    var VM = new Vue({
      el: '#hzh',
      data: {
        hzhEdit: true
      }
    })  
  </script>
</body>

image

在一些场景中，也可以通过给同一个元素的 key attribute 设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态 property 的单个元素过渡。例如：

<transition>
  <button v-if="docState === 'saved'" key="saved">
    Edit
  </button>
  <button v-if="docState === 'edited'" key="edited">
    Save
  </button>
  <button v-if="docState === 'editing'" key="editing">
    Cancel
  </button>
</transition>

可以重写为：

<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}
<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多个元素的过渡</title>
  <script src="./vue.js"></script>
</head>
 
<body>
  <div id="hzh">
    <transition>
      <button v-bind:key="hzhState">
        {{ hzhButtonMessage }}
      </button>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#hzh',
      data: {
        hzhState: 'hzh'
      },
      computed: {
        hzhButtonMessage: function () {
          switch (this.hzhState) {
            case 'hzh': return '黄子涵'
            case 'hcq': return '黄春钦'
            case 'cly': return '陈兰英'
          }
        }
      }
    })  
  </script>
</body>

image

过渡模式
posted @   黄子涵  阅读(37)  评论(0)  编辑  收藏  举报
相关博文：
·  单元素/组件的过渡
·  CSS 过渡
·  066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡
·  VUE学习-元素过渡
·  VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合新手
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手