提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue技术11.条件渲染

Vue技术 11 条件 渲染
2023-09-27 14:26:24 时间 
<!DOCTYPE html>>
<html>
    <head>
        <mata charset="UTF-8"/>
        <title>条件渲染</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            条件渲染：
                1.v-if
                写法：
                    （1）v-if=“表达式”
                    （2）v-else-if=“表达式”
                    （3）v-ellse=“表达式”
                适用于：切换频率较低的场景
                特点：不展示的dom元素直接被移除
                注意：v-if可以和v-else-if和v-else一起使用，但要求结构不能被“打断”。
                template一定使用v-if
                2.v-show
                写法：
                适用于：切换频率较高的场景
                特点：不展示dom元素未被移除，仅仅是使用样式隐藏掉
                3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2 v-show="true">欢迎来到{{name}}</h2>
        </div>
    </body>

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

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            }
        })
    </script>
</html>

相关文章