Vue条件渲染v-if和v-show

最新推荐文章于 2025-04-14 19:00:46 发布

执久呀

最新推荐文章于 2025-04-14 19:00:46 发布

阅读量658

点赞数 2

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_60719453/article/details/130480258

版权

文章介绍了Vue中v-if和v-show的用法与区别，v-if适用于切换频率低的情况，会移除DOM，而v-show只是改变display属性。v-for用于列表渲染，详细阐述了遍历数组、对象、字符串和指定次数的语法，并讨论了key的作用，强调了使用唯一标识作为key的重要性。

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

条件渲染v-if和v-show


<div id="root">

<!--    <div v-if="true">v-if</div>-->
<!--    <div v-show="true">v-show</div>-->
n:{
  {n}}
    <button @click="n++">点击n++</button>
    <div v-if="n==1">v-if</div>
    <div v-else-if="n==2">v-else-if</div>
    <div v-else>v-else</div>


</div>


<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            n:0
        },
        methods: {
        }

    });
    console.log(vm)

</script>