在官网上看教程,根据教程记录一下笔记:
在进行条件渲染时,可使用 key 控制元素的可重用。
官网例子效果如下图:
这里写图片描述
点击按钮可进行切换。
具体的实现代码官网给出了,但是只是html的代码。
完整代码如下:
html:

<div class="demo">
    <button @click="greet">toggle 切换</button>
    <template v-if="ok">
      <label>用户名</label>
      <input placeholder="输入用户名" key="username-input">
    </template>
    <template v-else>
      <label>昵称</label>
      <input placeholder="输入昵称" key="nickname-input">
    </template>
</div>

js:

var vm = new Vue({
    el: '.demo',
    data: {
      ok: true
    },
    methods: {  
    greet: function (event) {  
      this.ok=!this.ok;
    }  
  }  
})

完成的效果为:
这里写图片描述

点击按钮:
这里写图片描述

Logo

前往低代码交流专区

更多推荐