vue条件渲染

最新推荐文章于 2024-03-11 18:22:52 发布

原创最新推荐文章于 2024-03-11 18:22:52 发布 · 462 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue2学习专栏收录该内容

13 篇文章

订阅专栏

本文主要介绍了Vue.js中v-if和v-show的使用。v-if通过判断条件决定DOM元素是否存在于页面结构中，适用于切换频率低的场景，不展示的元素会被移除；v-show则是控制元素内容是否显示，元素结构已渲染，只是用样式隐藏，适用于切换频率高的场景。还提到使用v-if时元素可能无法获取，v-show一定能获取。

1. v-if

通过判断条件来决定自身所在的标签是否在页面结构中存在或消

失，它会直接修改dom标签元素。决定整dom标签元素在页面结构

中的存在。

写法：

（1）v-if=“表达式”

（2）v-else-if=”表达式“

（3）v-else=”表达式“

**适用于：**切换频率较低的场景

**特点：**不展示的DOM元素直接被移除

**注意：**v-if可以和：v-else-if、v-else一起使用，但要求结构不能被”打断“

使用v-if做条件渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <!--    引入vue-->
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<!--准备一个容器-->
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>
    
    <!--  使用v-if做条件渲染 -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
     <!--  v-if语句中值可以为表达式 -->
        <h2 v-if="1===1">欢迎来到{{name}}</h2>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成提示

    const vm = new Vue({
        el: "#root",
        data: {
            name: "尚硅谷",
            n: 0
        }
    })
</script>
</body>
</html>

使用v-if渲染< h2 >元素 if里面的值为 false 条件不成立所以元素不渲染在页面中

v-else-if 和 v-else

在条件判断中还有v-else-if 和 v-else 它们的用法与原生的if else大致相同

在if表达式中的条件不成立则继续判断else后面的条件满足条件之后执行渲染

<body>
<!--准备一个容器-->
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!--  v-else-if和v-else   -->
      <div v-if="n===1">div1</div>
      <div v-else-if="n===1">div2</div>
      <div v-else-if="n===3">div3</div>
      <div v-else>没有啦</div>

        <!--  v-if与v-else-if  -->
       <!-- <template v-if="n===1">
            <h2>div1</h2>
            <h2>div2</h2>
            <h2>div3</h2>
        </template>-->
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成提示

    const vm = new Vue({
        el: "#root",
        data: {
            name: "尚硅谷",
            n: 0
        }
    })
</script>
</body>

2. v-show

v-show：通过条件判断标签内元素内容是否在页面当中显示，但是

本身的dom标签结构是已经渲染到页面结构当中的，只是隐藏内

容，即：将当前的标签样式设置为display：none

**写法：**v-show=”表达式“

**适用于：**切换频率较高的场景

**特点：**不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

v-show与v-if用法相似，只是v-if不满足条件就不渲染元素，而v-show是渲染了所有元素和条件来控制元素是否显示

示例：

<body>
<!--准备一个容器-->
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>
   <!--  使用v-show做条件渲染 -->
    <h2 v-show="false">欢迎来到{{name}}</h2>
    <h2 v-show="1===1">欢迎来到{{name}}</h2>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成提示

    const vm = new Vue({
        el: "#root",
        data: {
            name: "尚硅谷",
            n: 0
        }
    })
</script>
</body>