领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

Vue基础入门，第16节，html元素隐身的4种方法，优缺点比较

nixiaole 2024-11-23 20:35:37 知识剖析 11 ℃

（1）定义n初始值0,

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>

（2）定义自加按钮，展示n的值，和判断结果

<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>

1、v-show

<h1 style="color: red">使用v-show进行条件渲染</h1>
<h3 v-show="n == 1">使用v-show进行条件渲染</h3>

2、v-if

<h1 style="color: red">使用v-if进行条件渲染</h1>
<h3 v-if="n == 1">使用v-if进行条件渲染</h3>

3、v-if v-else-if v-else

<h1 style="color: red">使用if else-if else进行条件渲染 </h1>
<h3 v-if="n === 1">使用v-if进行条件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if进行条件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if进行条件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if进行条件渲染 if else-if - v-else</h3>

4、template

<h1 style="color: red">使用template v-if进行条件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
</template>

执行结果

笔记分享

<pre v-show="true">
    条件渲染：
    1、v-if
        写法：
            （1）v-if = "表达式"
            （2）v-else-if = "表达式"
            （3）v-else = "表达式"
        适用于：切换频率较低的场景
        特点：不展示的DOM元素将被直接删除
        注意：v-if和v-else-if、v-else一起使用的时候，要求结构不可以被打断
    2、v-show
        写法：v-show = "表达式"
        适用于：切换频率较高的场景
        特点：不展示的DOM元素未被移除，使用样式进行隐藏
    3、备注
        使用v-if时，元素可能无法获取到，使用v-show是可获取到的
    4、使用template v-if
        写的时候template对内容进行了包裹，
        等最终页面渲染的时候，将把template标签删掉，
        这也就是说不破坏原来的样式。
        但是template只能配合v-if进行使用。
</pre>

源码截图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <!-- 导入vue文件 -->
    <script src="static/js/vue.js"></script>
    <script src="static/js/vue-router.js"></script>
</head>
<body class="container">
<div id="app">
    <pre v-show="true">
        条件渲染：
        1、v-if
            写法：
                （1）v-if = "表达式"
                （2）v-else-if = "表达式"
                （3）v-else = "表达式"
            适用于：切换频率较低的场景
            特点：不展示的DOM元素将被直接删除
            注意：v-if和v-else-if、v-else一起使用的时候，要求结构不可以被打断
        2、v-show
            写法：v-show = "表达式"
            适用于：切换频率较高的场景
            特点：不展示的DOM元素未被移除，使用样式进行隐藏
        3、备注
            使用v-if时，元素可能无法获取到，使用v-show是可获取到的
        4、使用template v-if
            写的时候template对内容进行了包裹，
            等最终页面渲染的时候，将把template标签删掉，
            这也就是说不破坏原来的样式。
            但是template只能配合v-if进行使用。
    </pre>
    <p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
    <h2>n == {{n}}</h2>
    <h3 v-text="n == 1"></h3>
    <hr>
    <h1 style="color: red">使用v-show进行条件渲染</h1>
    <h3 v-show="n == 1">使用v-show进行条件渲染</h3>
    <hr>
    <h1 style="color: red">使用v-if进行条件渲染</h1>
    <h3 v-if="n == 1">使用v-if进行条件渲染</h3>
    <hr>
    <h1 style="color: red">使用if else-if else进行条件渲染 </h1>
    <h3 v-if="n === 1">使用v-if进行条件渲染 if else-if - v-if="n === 1"</h3>
    <h3 v-else-if="n == 2">使用v-if进行条件渲染 if else-if - v-else-if="n == 2"</h3>
    <h3 v-else-if="n == 3">使用v-if进行条件渲染 if else-if - v-else-if="n == 3"</h3>
    <h3 v-else>使用v-if进行条件渲染 if else-if - v-else</h3>
    <hr>
    <h1 style="color: red">使用template v-if进行条件渲染 </h1>
    <template v-if="n == 1">
        <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
        <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
        <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
    </template>

</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表