Vue基础：条件渲染、列表渲染、事件处理

奋飛

发布于 2021-08-30 10:59:44

1.4K0

条件渲染

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 删除

渲染

Vue基础：条件渲染、列表渲染、事件处理

Vue基础：条件渲染、列表渲染、事件处理

条件渲染

v-if

v-show

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐