vue的条件渲染

指令：v-if,v-else-if,v-else

注意事项：vue会复用之前的元素

举例：例如下面的例子，要是先显示用户名，改变show值，再显示邮箱，但是input是复用用户名的input（值也不会清空）

解决：给标签上增加key值，只要key值不一样，就不会复用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>vue的条件渲染</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="show">
        用户名：<input key="uername">
      </div>
      <div v-else>
        邮箱：<input key="mail">
      </div>
    </div>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          show:true
        }
      })
    </script>
  </body>
</html>

posted on 2019-07-09 20:16 崭新开始阅读(180) 评论(0) 编辑收藏举报