园龄：3年5个月粉丝：9 关注：0

第一章 Vue核心第十一节条件渲染

条件渲染：
   1.v-if
      写法：
          (1).v-if="表达式"
          (2).v-else-if="表达式"
          (3).v-else="表达式"
      适用于：切换频率比较低的场景
      特点：不展示的DOM元素直接移除
      注意：v-if可以和v-else、v-else-if一起使用，但要求结构不能被打断

   2.v-show
      写法：v-show="表达式"
      适用于：切换频率比较高的场景
      特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

   3.备注：使用v-if时，元素可能无法获取到，二使用v-show一定可以获取到

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../../鼠标指针样式.css"/>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>当前的n值是{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <button @click="n--">点我n-1</button>
        <!--使用v-show做条件渲染-->
        <!--<h2 v-show="false">你好，{{name}}</h2>-->

        <!--使用v-if做条件渲染-->
        <!--<h2 v-if="false">你好，{{name}}</h2>-->

        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>你好！{{name}}</div>

        <template v-if="n === 1">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>
            <h2>4</h2>
        </template>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#root',
            data:{
                name:'retrace',
                n:0
            },
            methods:{
            }
        });
    </script>
</body>
</html>

本文作者：何以之

本文链接：https://www.cnblogs.com/serendipity-echo/articles/15407954.html

posted @ 2021-10-14 18:29 何以之阅读(33) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

何以之

第一章 Vue核心第十一节条件渲染

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

何以之

第一章 Vue核心 第十一节 条件渲染

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

第一章 Vue核心第十一节条件渲染