vue.js中v-if以及v-show的使用

Lalo_iy

于 2019-11-17 16:58:44 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/shuttle33/article/details/103110424

本文介绍Vue.js中使用v-if和v-show进行条件渲染的方法。通过一个示例代码展示了如何根据变量flag的真假来控制元素的显示与隐藏。v-if会直接从DOM中移除元素，而v-show仅切换元素的display属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <div id="app">
        <input type="button" @click="flag=!flag" value="toggle" />
        <h3 v-if="flag">这是由v-if控制的元素</h3>
        <h3 v-show="flag">这是由v-show控制的元素</h3>
    </div>

  var vm = new Vue({
	  el:"#app",
	  data:{
	      flag:true
	  }
  })

显示效果：
在这里插入图片描述