在官网上看教程,根据教程记录一下笔记:
在进行条件渲染时,可使用 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;
}
}
})
完成的效果为:
点击按钮: