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

最新推荐文章于 2023-12-19 09:06:24 发布

我会努力变强的

最新推荐文章于 2023-12-19 09:06:24 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/qq_40837310/article/details/122814798

版权

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

简介

主要介绍vue的条件渲染的两个指令语法v-if和v-show。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
    <div id="root">
    <!-- 纯v-if展示 -->
    <div v-if="n==1">当n=1时渲染</div>
    <div v-if="n==1">当n=1时渲染</div>
    <div v-if="n==1">当n=1时渲染</div>

    <!-- 上面上个的条件都是一样的，可以使用template来括起来。 -->
    <!-- <template v-if="n==1">
        <div >当n=1时渲染</div>
        <div >当n=1时渲染</div>
        <div >当n=1时渲染</div>
    </template> -->

    <div v-if="n==2">当n=2时渲染</div>
    <div v-if="n==3">当n=3时渲染</div>
    <div v-if="n==4">当n=4时渲染</div>



    <!-- 纯v-show展示 -->
    <div v-show="n==1">当n=1时渲染</div>
    <div v-show="n==1">当n=1时渲染</div>
    <div v-show="n==1">当n=1时渲染</div>
    <div v-show="n==2">当n=2时渲染</div>
    <div v-show="n==3">当n=3时渲染</div>
    <div v-show="n==4">当n=4时渲染</div>
    <button @click="n++">n+1</button>

    <!-- 还有一种是if  else if  else的形式，与js分支的逻辑一致 -->
    <div v-if="n==1">当n=1时渲染</div>
    <div v-else-if="n==2">当n=2时渲染</div>
    <div v-else-if="n==3">当n=3时渲染</div>
    <div v-else-if="n==4">当n=4时渲染</div>
    <div v-else>当n=其他时渲染</div>


</div>
</body>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#root",
        data:{
            n:1
        }
    })
</script>
</html>