vue_条件渲染v-if_v-show区别 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .activated {color: red}
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click='handleShow'>显示/隐藏</button>
    <!-- 条件渲染  -->
    <!-- 
      v-if和v-show区别 
      v-if条件为真时会渲染dom，条件为假时会销毁dom
　　　 v-show始终都会渲染dom，通过style的display：none控制显示隐藏
　　　 在频繁的切换时，推荐使用v-show，提升性能
    -->
    <!-- vue会自动复用dom元素 当用户名input有值的时候，然后切换邮箱名也有值，input会自动复用 -->
    <!-- 解决办法就是为input分别添加上key属性，代表vue中唯一节点 -->
    <div v-if="isShow">v-if{{message}}用户名：<input type="text" key="username"></div>
    <div v-else>{{isShow}}//v-else邮箱名：<input type="text" key="mailname"></div>
    <div v-show="isShow">v-show{{message}}</div>
  </div>
</body>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data: {
      isShow: false,
      message: '显示'
    },
    methods: {
      handleShow () {
        this.isShow = !this.isShow
      }
    }
  })
  
</script>
</html>

 

posted @ 2020-03-05 11:10  前端之旅  阅读(487)  评论(0)    收藏  举报