Vue基础：条件渲染、列表渲染、事件处理
条件渲染
v-if
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
<template v-if="type">
<label>Usernamelabel>
<input type="text" placeholder="enter your username">
template>
<template v-else>
<label>Emaillabel>
<input type="text" placeholder="enter your email">
template>
<button @click="toggleType">切换button>那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。
可以通过添加一个具有唯一值的 key 属性，来达到每次切换时，输入框都将被重新渲染
<template v-if="type">
<label>Usernamelabel>
<input type="text" placeholder="enter your username" key="username">
template>
<template v-else>
<label>Emaillabel>
<input type="text" placeholder="enter your email" key="email">
template>
<button @click="toggleType">切换button>注意， 元素仍然会被高效地复用，因为它们没有添加 key 属性。
v-show
<template v-show="false">
<p>哈哈哈p>
template>上述内容仍然会被显示出来！注意， v-show 不支持
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017/09/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
