技术原理

初学者探析 Vue - 应用 is 动态性转换元器件

在一些情况下,大家会期待內容在特殊的状况下能显示信息,比如页籤的实际效果,尽管能够通过 v-if 来分辨,并显示信息元器件
但元器件一多的情况下,反倒并不是一个理想化的方式 ,因此才有 is 动态性转换元器件

先来初谈 v-if 分辨元器件的显示信息:

<div id="app">
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">深蓝色元器件</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">鲜红色元器件</a>
        </li>
     </ul>
     <primary-component v-if="current === 'primary-component'"></primary-component>
     <danger-component v-if="current === 'danger-component'"></danger-component>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            current: 'primary-component'
        }
    });
</script>

所述是通过点一下 标籤来更动 data 内的 current 变化,再意谓 v-if 去分辨 current 变化满足条件时,元器件便会显示信息,当元器件一多的情况下,也要逐一分辨,看起来有点儿愚钝,此刻能够应用 is 动态性转换元器件

<div id="app">
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">深蓝色元器件</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">鲜红色元器件</a>
        </li>
     </ul>
     <div :is="current"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            current: 'primary-component'
        }
    });
</script>

应用 is 动态性转换元器件,current 变化大家必须放元器件的姓名,那样大家就可以保证动态性转换元器件

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能发展三个阶段 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录