Vue

v-show与v-if

联系站长 作者:web知道,未知,网络大神 来源:未知 2018-10-06 12:30 我要评论

v-show与v-if的区别在于一个是占位置的,一个不占位置的,如果想知道哪个占位置那就试试吧...

v-show与v-if的区别在于一个是占位置的,一个不占位置的,如果想知道哪个占位置那就试试吧

v-show可以控制元素的显示和隐藏,
语法 v-show='bool值'
细节:它是通过控制样式来决定元素的显示和隐藏
 
v-if和v-show例子
<!-- v-if:通过控制dom元素的创建来实现显示和隐藏 -->
<p v-if='isShow'>我是通过v-if来控制的</p>
 
<!-- 通过控制元素的样式来实现显示和隐藏 -->
<p v-show='isShow'>我是通过v-show来控制的</p>
<button @click='isShow = !isShow'>切换</button>
 
<!-- 使用建议:
    1.如果是在量操作dom,建议使用v-show来实现,避免反复创建dom
     2.如果是异步操作,建议使用v-if,避免解析不必要的dom结构 -->


v-if可以控制元素的显示和隐藏
语法 v-if='bool值'
细节:通过控制是否创建dom结构来决定元素的显示和隐藏
 
  <tr v-if="item.length == 0" >
  //条件成立,就是true
  <td colspan="4">目前没有任何信息</td>
   </tr>
 
<div id="app">
  <p v-if='score >= 90'>A</p>
  <p v-else-if='score >= 80'>B</p>
  <p v-else-if='score >= 70'>C</p>
  <p v-else-if='score >= 60'>D</p>
  <!-- v-else后面不需要添加任何的表达式 -->
  <p v-else>E</p>
</div>




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评