Vue.js（2.x）之条件渲染

Posted 2020-10-03 ann_glx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js（2.x）之条件渲染相关的知识，希望对你有一定的参考价值。

1.v-if：这里的官网文档看完后赶脚v-if就是用来判断元素是显示还是隐藏。

2.template这个包装元素感觉挺好用，以后把需要某些特定操作才出现的元素存放进去挺好。

3.前面看的网友写的还可以配合v-show来使用，结果运行后没效果。看来还是得老实看官网简介：

v-else-if与v-else使用大同小异，不截图了。

4.用 key 管理可复用的元素

没有代码测试是不完整的，再说疑问也多啊。是时候贴代码写测试结果了：

html代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="app">
  <template v-if="loginType === \'username\'">
    <label>Username</label>
    <input placeholder="Enter your username">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
  </template>
</div>
<script src="js/vue.js"></script>
<script>
   var vm = new Vue({
        el: \'#app\',
        data: {
           loginType: \'username\'
        }
    })
</script>
</body>
</html>