Vue条件渲染-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue条件渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue条件渲染,linerVue,javascript,前端,vue.js

v-if 和 v-show

<body>
<div id="root">
    <!--用v-show做条件渲染-->
<!--   <h2 v-show="false">欢迎来到{{name}}</h2>-->
    <!--使用v-if做条件渲染-->
    <h2 v-if="false">欢迎来到{{name}}</h2>

</div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:'小清华',
        }
    })
</script>

效果：false渲染效果不显示。v-show：隐藏，但结构还在。v-if：删除，结构不在

Vue条件渲染,linerVue,javascript,前端,vue.js

v-show动态使用，和v-if，v-else-if，v-else使用

<div id="root">
    <h2>当前的n值是{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!--用v-show做条件渲染-->
<!--   <h2 v-show="false">欢迎来到{{name}}</h2>-->
    <!--使用v-if做条件渲染-->
<!--    <h2 v-if="false">欢迎来到{{name}}</h2>-->
    <div v-show="n===1">展示小王</div>
    <div v-show="n===2">展示小刘</div>
    <div v-show="n===3">展示小陈</div>


    <h2>当前的a值是{{a}}</h2>
    <button @click="a++">点我a+1</button>
    <!--  v-else和v-else-if  中间不允许有其他东西打断，必须连着写-->
    <div v-if="a===1">展示1</div>
    <div v-else-if="a===2">展示2</div>
    <div v-else-if="a===3">展示3</div>
    <div v-else>展示啊啊啊</div>

</div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:'小清华',
            n:0,
            a:0,
        }
    })
</script>

效果：

Vue条件渲染,linerVue,javascript,前端,vue.js

template的使用文章来源地址https://www.toymoban.com/news/detail-568900.html

<!--template只能配合v-if使用，可以做到不影响结构-->
    <template v-if="n===1">
        <h2>你好</h2>
        <h2>liner</h2>
        <h2>小清华儿</h2>
    </template>

到了这里，关于Vue条件渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Vue条件渲染

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2