vue v-show v-if 的使用

最新推荐文章于 2024-09-22 11:17:00 发布

weixin_30289831

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量54

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chengfengchi/p/11338448.html

版权

<!DOCTYPE html>
<html>
 <meta charset="utf-8">
<head>
    <title></title>
</head>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
    <input type="button" @click='f=!f' value='提交' name="">

<!--     v-if    特点:每次都会重新删除或创建元素
    v-show  特点:不会删除元素 只是切换元素的 display:none 的样式

    v-if 有较高的切换性能消耗
    v-show 有较高的初始渲染消耗

    如果元素涉及到频繁的换行,最好不要使用v-if 而推荐使用v-show
    如果永远不会再显示则推荐使用 v-if -->

    <div v-if='f'>1111</div>
    <div v-show='f'>2222222</div>
</div>
<script type="text/javascript">
  var vm = new Vue({
       el:'#app',
       data:{       
           f:true
       },
       methods:{
       }
   })
</script>
</body>
</html>